CODEWITHSUNDEEP
htmlcss
The Coding Wombat
The Coding Wombat

Reputation: 815

Some style not working on :after

hello

I try to style content that is added with :after , color: ; is overwritten, but text-decoration: ; doesn't work.

code.html

<html>
<head>
    <style>
        .separate-hyphen *:not(:last-child):after {
            content: " -\00a0";
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
    <div class="separate-hyphen">
        <a href="link1.extension">Link 1</a>
        <a href="link2.extension">Link 2</a>
    </div>
</body>
</html>

result (it's an image)

enter image description here

Upvotes: 2

Views: 47

Answers (3)

wallabra
wallabra

Reputation: 442

Try something like this:

<html>
  <head>
    <style>
      #hyphen {
        color: red;
        text-decoration: none;
      }

      .linkz
      {
        color: red;
        padding: 5px;
        font-family: verdana;
        font-size: 18px;
      }
      
      #linkcontainer
      {
        border: 3px solid blue;
        padding: 5px;
        border-radius: 11px;
        width: 135px;
        background-color: #6d6;
      }
    </style>
  </head>
  <body>
    <p id="linkcontainer">
        <a href="link1.extension" class="linkz">Link 1</a><a id="hyphen">-</a><a href="link2.extension" class="linkz">Link 2</a>
    </p>
  </body>
</html>

It will work for what I think you want.

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Because pseudo element :after is rendered inside of element, not outside, so of course styling it cannot affect outer container styles:

+--------------------+
|         +--------+ |
| Content | :after | |
|         +--------+ |
+--------------------+

You need to find another way. Maybe to visually move :after outside of its container with absolute positioning:

.separate-hyphen *:not(:last-child) {
  margin-right: 10px;
}
.separate-hyphen *:not(:last-child):after {
  content: " -\00a0";
  text-decoration: none;
  color: red;
  position: absolute;
  padding: 0 5px;
}
<div class="separate-hyphen">
  <a href="link1.extension">Link 1</a>
  <a href="link2.extension">Link 2</a>
</div>

Upvotes: 5

sindiploma
sindiploma

Reputation: 171

Try with text-decoration: none instead of border:none.

Upvotes: 0

Related Questions