CODEWITHSUNDEEP
htmlcss
Scarlett Lucĭa
Scarlett Lucĭa

Reputation: 49

I want to insert a :before symbol to my "li" tag?

So basically, I want my "li" things to look like little chat boxes with arrows. Every other line will have an arrow facing the opposite way and side, like this:

http://i.gyazo.com/e088cd3590de93481c0b76ff912f2afe.png

I've tried everything, but I can never really get it to work. Note, I do need my ":before" and ":after" to be positioned as "relative" because I can't have them sticking to just one place on the page.

.line li{
list-style:none;
background: #F4F4F4;
border:1px solid #EDEDED;
padding:10px;
border-radius:3px;
color:#A0A0A0;
width:160px;
}


.line .odd {
margin-left:15px;
}

.line .even {
margin-left:35px;
}

.line .odd::before{
position:relative;
content:('◥');
color:#F4F4F4;
z-index:999;
}

.line .odd::after{
position:relative;
content:('◤');
color:#F4F4F4;
z-index:999;
}

Upvotes: 1

Views: 197

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241078

The pseudo element content values are invalid. Valid values for the content property are:

normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

In your case, the value should be a string.

Rather than content: ('◥'), it should be content: '◥' or content: '(◥)'

.line .odd::before{
    position: relative;
    content: '◥';
    color: #F4F4F4;
    z-index: 999;
}

.line .odd::after{
    position: relative;
    content: '◤';
    color: #F4F4F4;
    z-index: 999;
}

Upvotes: 2

Related Questions