如何分隔<a> element which is inside a <p> element

Question

I have this code:

<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text <a href="/es/cunit"
class="more-link">more</a></p>

So, the "more" link is shown inline with the "some text.." text.

I need it to be place in a new line just below the text.

display: block; doesn't work because it will fill the 100% of the width.

The html code is generated by a CSM, then I don't want to change it.

Picture below: I can't upload a picture with Safari ...:(

Answer 1

您可以使用：before：after伪元素并放置内容：“\ A”表示换行符：

p a:after, p a:before { content:"\A"; white-space:pre; }

<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text <a href="/es/cunit"
class="more-link">more</a></p>

Answer 2

我没有足够的声誉来评论，所以我在这里发帖。但是为什么不使用换行标记。

<br> 

让你的代码像这样。

<p>Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text Some text Some text Some
text Some text Some text Some text Some text 
<br> 
<a href="/es/cunit"
class="more-link">more</a></p>

Answer 3

.more-link:before{
  content: '';
  display: block;
}