Removing link from :before items in menu - css

Question

So I have the following code:
<style>
.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul a li {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul a:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
</style>
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
Or if you prefer:
https://jsfiddle.net/f64z4tp8/1/
As you can see I have three links, and in between are an icon (star). However, I would like it so that the stars (before items) are not links. Can this be done ?

Answer 1

Your markup is incorrect: you cannot nest other elements except for <li> directly within <ul> (or <ol> too, for the sake of completeness). If you update your markup to reflect that changes, i.e.:
<ul>
<li>...</li>
</ul>
and slightly modify your selectors by changing this:
.menu ul a:not(:first-child):before
...to this:
.menu ul li:not(:first-child):before
and you are good to go:
.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul li {
display: inline-block;
}
.menu ul a {
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>

Answer 2

I've added display:inline-block; to the .menu ul a:not(:first-child):before css class. At this point the text-underline goes away and the stars become red.
This is because the CSS specs say:
When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

Answer 3

.menu {
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
}
.menu ul li a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li a {
display: inline-block;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>

Answer 4

Put as CSS selector:
.menu ul a:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
text-decoration: none;
pointer-events: none;
}
pointer-events: none; remove any pointer interaction with the ::before element.
text-decoration: none; remove any default UI effect like underline.

Answer 5

In order to achieve this you'll need to add the stars outside of the list links. You should also follow the HTML specs as much as possible, where <a> are not valid <ul> child elements.
So the quickest solution would be something like this:
https://jsfiddle.net/f64z4tp8/8/
HTML:
You can fix the HTML structure and use it according to the official specs by making the <a> elements children of the <li> items, like so:
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
CSS:
Since you changed the HTML structure, you'll also need to update the CSS selectors ensure you're still styling the stars and list items correctly, so change the rules that target .menu a li to just .menu li or just .menu a.
For example, on the selector where the star is added, change from .menu ul a to .menu ul li, ending up with something like this:
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: $primaryRed;
}
EXAMPLE SOLUTION:
.menu {
grid-area: menu;
justify-self: right;
align-items: center;
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
font-family: 'LemonReg', sans-serif;
}
.menu ul a {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: $primaryRed;
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>

Answer 6

You must change html code, a element must be inside li element.
Like this:
<li>LINK 1</li>
and also
:before for li
.menu {
grid-area: menu;
justify-self: right;
align-items: center;
padding: 30px 50px;
padding-bottom: 0px;
}
.menu ul {
list-style-type: none;
font-family: 'LemonReg', sans-serif;
}
.menu ul a {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li {
display: inline-block;
color: $yellowish;
text-transform: uppercase;
font-size: 20px;
}
.menu ul li:not(:first-child):before {
padding-right: 15px;
padding-left: 15px;
content: '\2605';
color: blue;
}
<div class="menu">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>