Before Selector Not Working

HTML & CSS
1

I am using before and after selectors to add content before the first item of a list and after each item.

The after is working fine but can’t get the before to work correctly. Any advise is appreciated.

HTML

<ul class="accommodation luxury">
<li>Sheraton Hotel</li>
<li>Church Hill Courts Hotel</li>
</ul>

CSS

.luxury li:first-child::before {
	content: "<strong>Up-market:</strong> ";
}

.accommodation li::after {
	content:" | ";
}

.accommodation li:last-child::after {
	display: none;
}
2

I didn’t find any documentation, so this is only a guess.

Instead of trying to display none the pseudo-element, try giving it content empty string?

3

That part works fine. It’s the before part that I can’t get to work.

The result is: Sheraton Hotel | Church Hill Courts Hotel

What I want is: Up-market: Sheraton Hotel | Church Hill Courts Hotel

The before adds the accommodation level (there’s 3) and the after adds a pipe after each property in the list, hiding it for the last.

This all comes from CPT fields.

4

Try this please.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/before-selector-not-working/318305
pangono
2019.01.23 01:25
-->
    <style>
.luxury li:first-child::before {
    content: "Up-market: ";
    font-weight:bold;
}

.accommodation li::after {
	content:" | ";
}

.accommodation li:last-child::after {
	display: none;
}
    </style>
</head>
<body>

<ul class="accommodation luxury">
    <li>Sheraton Hotel</li>
    <li>Church Hill Courts Hotel</li>
</ul>

</body>
</html>
5

That doesn’t do it unfortunately.

6

It does work as raw HTML so something else is effecting it.

7

Try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/before-selector-not-working/318305
pangono
2019.01.23 01:25

Up-market: Sheraton Hotel | Church Hill Courts Hotel
-->
    <style>
.luxury {
    list-style:none;
    outline:1px dashed red;
}
.luxury li:first-child::before {
    content: "Up-market: ";
    font-weight:bold;
}

.accommodation li {
    display:inline-block;
    outline:1px dashed blue;
}
.accommodation li::after {
    content:" | ";
}

.accommodation li:last-child::after {
    display: none;
}
    </style>
</head>
<body>

<ul class="accommodation luxury">
    <li>Sheraton Hotel</li>
    <li>Church Hill Courts Hotel</li>
</ul>

</body>
</html>
8

That does work. I had the inline-block and list-style set but didn’t include that as was working and didn’t seem relevant to the problem.

Thanks a lot although I’m not clear why it works now and not before.

9

You could also try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/before-selector-not-working/318305
pangono
2019.01.23 01:25

Up-market: Sheraton Hotel | Church Hill Courts Hotel
-->
    <style>
.luxury {
    list-style:none;
    padding-left:0;
    outline:1px dashed red;
}
.luxury li {
    display:inline-block;
    outline:1px dashed blue;
}
.luxury li::before {
    content:" | ";
}
.luxury li:first-child::before {
    content: "Up-market: ";
    font-weight:bold;
}

    </style>
</head>
<body>

<ul class="accommodation luxury">
    <li>Sheraton Hotel</li>
    <li>Church Hill Courts Hotel</li>
</ul>

</body>
</html>
1 Like
10

The content property can only accept standard ‘ latin’ text (not html tags). Any other characters would need to be escaped in Unicode format but of course cannot be rendered as html.

As it’s name indicates the content property inserts content not html. :slight_smile:

2 Likes
11

:blush: sorry. I read the post but obviously didn’t read it. It didn’t register that you were trying to have an element as text.

If you really need to have an element there you can do it with JavaScript.

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.