CODEWITHSUNDEEP
htmlcss
F.P
F.P

Reputation: 17831

Keep :before content and element content together

Consider the following HTML/CSS:

HTML

<h5>Actual</h5>
<p id="content">
    Hello <a class="textLink" href="#">World</a>
</p>

CSS

p#content {
    border: 1px solid black;
    padding: 5px;
    width: 65px;
}

a.textLink:before {
    content: ">> ";
}

This will render as such:

Actual render result

How can I achieve it so, that the :before content will not break, but instead be snapped to the element content, to produce a result like this:

Desired result

Of course, this can only happen if there is enough space for the content, but just to prove there is, we can use this

HTML

<h5>Desired</h5>
<p id="content">
    Hello<br/><a class="textLink" href="#">World</a>
</p>

Which will provide the desired result. Only; how can I do this without inserting manual <br>eaks?

Fiddle

Upvotes: 1

Views: 62

Answers (3)

Akshay
Akshay

Reputation: 14348

You can use display:inline-block on the a element

p#content {
    border: 1px solid black;
    padding: 5px;
    width: 65px;
}
a{
    display:inline-block;
}
a.textLink:before {
    content:">> ";
}
<h5>Actual</h5>
<p id="content">
    Hello <a class="textLink" href="#">World</a>
</p>

<h5>Desired</h5>
<p id="content">Hello
    <br/><a class="textLink" href="#">World</a>
</p>

Upvotes: 3

Shelly
Shelly

Reputation: 351

Try this

Demo : http://jsfiddle.net/mkufymqr/1/

a.textLink:before {
    content: " >>";
}

Upvotes: 0

dfsq
dfsq

Reputation: 193261

This is the case when you need to use non-breaking space &nbsp;. If it was HTML content then you would use <a class="textLink" href="#">&nbsp;World</a>. However you need to use unicode encoded form of it U+00A0 in :before, which will look like this:

p#content {
    border: 1px solid black;
    padding: 5px;
    width: 65px;
}

a.textLink:before {
    content: ">>\00A0";
}
<h5>Actual</h5>
<p id="content">
    Hello <a class="textLink" href="#">World</a>
</p>

Upvotes: 2

Related Questions