How to target text inside an html element? - css

Question

I have the following case generated by a plugin which I am not able to rewrite as I would need to fix this. It generates breadcrumbs for a website like the following example:
<li><a>Parent</a></li>
<li><a>Subparent</a></li>
<li><a>Subsubparent</a></li>
<li>Current Site</li>
I have styled the links to be clickable more easy
li {height: 40px;}
li a {padding: 5px; display: inline-block; height: 30px;}
Now of course the last element does not get the same padding and looks wired. I am not able to wrap a html element like span around it in php.
Is there a css selector to select the text inside of an element, without affecting the element itself? Or wraps an html element like span around it, something like
li:last-child::before {content:"<span>"}
Every hint appreciated! If someone likes jsfiddle here is one to play with.

Answer 1

Why don't you just add the padding to the last li together with the anchors?
Updated JsFiddle
li a, li:last-child {padding: 10px; display: inline-block;}

Answer 2

I have created the following work-around to get the right styling.
li:last-child::before {
content: "";
opacity: 0;
display: inline-block;
margin: 10px 0 10px 10px;
}
li:last-child::after {
content: ".";
opacity: 0;
display: inline-block;
margin: 10px 10px 10px 0;
}
Sadly one of the both pseudo elements needs content:"." or another real content. This is a solution to target spacing (margin/padding) without changing some css/html.
Updated jsfiddle
Still I would love to see clean css solutions!

Answer 3

My own suggestion, at its simplest, would be:
li {
height: 40px;
/* vertically-aligns the text to
the same 'line': */
line-height: 40px;
/* to display in a row, given the
text-alignment I assume this is required,
remove/adjust if not: */
float: left;
/* removes the bullets: */
list-style-type: none;
/* Just to clearly show the size of
the <li> elements: */
background-color: #ffa;
}
li:nth-child(odd) {
/* again, just to show the size: */
background-color: #f90;
}
li a {
/* to fill the whole of the <li>: */
display: block;
}
li a:hover {
/* just to show the hover 'hit-area': */
background-color: #f00;
transition: background-color 0.4s linear;
}
li {
height: 40px;
line-height: 40px;
float: left;
list-style-type: none;
background-color: #ffa;
}
li:nth-child(odd) {
background-color: #f90;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>
Now, to style them as 'breadcrumbs,' you could use generated content to provide
the separators, for example, you can update the CSS:
li {
/* other rules remain the same,
this is added to provide space
for the generated content: */
margin-left: 1em;
}
/* there is (usually) no marker before
the first breadcrumb, this removes its
space: */
li:first-child {
margin-left: 0;
}
/* other rules that, remain the
same, are excised for brevity */
li::before {
/* unicode for the guillemot,
'»', character: */
content: '\00BB';
/* to position easily and prevent
altering the position of the child
<a> elements: */
position: absolute;
/* simple means to move the generated
content off the left edge: */
right: 100%;
width: 1em;
text-align: center;
}
/* no marker the first breadcrumb: */
li:first-child::before {
/* removing both content and width: */
content: '';
width: 0;
li {
height: 40px;
line-height: 40px;
position: relative;
margin-left: 1em;
float: left;
list-style-type: none;
}
li:first-child {
margin-left: 0;
}
li a {
display: block;
}
li a:hover {
background-color: #f00;
transition: background-color 0.4s linear;
}
li::before {
content: '\00BB';
position: absolute;
right: 100%;
width: 1em;
text-align: center;
}
li:first-child::before {
content: '';
width: 0;
}
<ul>
<li>Parent
</li>
<li>Subparent
</li>
<li>Subsubparent
</li>
<li>Current Site</li>
</ul>