CSS: Styling The Content of Before Pseudo Element on a List

CSS : Styling the content of before pseudo element on a list

There's no way to rotate the border and text separately. Instead, you can split the number and the border into two different pseudo-elements, :before and :after.

See: http://jsbin.com/agotuj/54/edit

.test ol {
    counter-reset: li;
    list-style-type: none;
}
.test ol > li {
    position: relative;
    list-style: none;
    margin-bottom: 20px;
    padding-left: 5px;
}
.test ol > li:before, .test ol > li:after {
    position: absolute;
    top: -2px;
    left: -24px;
    width: 21px;
    height: 21px;
    line-height: 21px;
    font-size: 16px;
}
.test ol > li:before {
    content: counter(li);
    counter-increment: li;
    color: #E2202D;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}
.test ol > li:after {
    content: '';
    border: 1px dashed #E2202D;
    border-radius: 6px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

Styles for all Globally pseudo element like :before?

'*' is the universal selector that matches every element in your dom. It is possible to extend this selector call with pseudo selectors like :before and :after.

So you can use: *:before, *:after {...}
See this example: https://codepen.io/anon/pen/vPRgmL

EDIT:

Your code does not work because of the specificity of your universal selector.

'div' has a higher specificity than '*' so div wins here.
See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Keep HTML-link within a list in the same line as ::before pseudo-element

Add these two property/values to li a selector:

display: inline-block;
width: 100%;

• display: inline is the default for <a>. Width cannot be set -- inline elements are formless like water.

• display: block makes elements solid and occupies the whole area right and left by default. Even if its width is set to something smaller, it will insist that it'd be the only one to occupy its own line. That's the reason for the displacement seen in Example 1. Block elements are unyielding like metal.

• display: inline-block will sit easily with neighbors to the left and right of it and width can be set. Inline-block elements are flexible like clay.

BTW for aesthetics try text-decoration: none on li a and don't forget:

a:link
a:visited
a:hover
a:active

in that specific order.

---

Demo

:root,
body {
  font: 400 16px/1.45 Verdana
}

ul {
  list-style: none;
}

li {
  position: relative;
  width: 99%;
  margin-bottom: 6px;
}

li::before {
  position: absolute;
  left: -1.5rem;
  display: inline-block;
  line-height: 1.45;
  vertical-align: middle;
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  padding: 0.15rem 0 0 0;
}

li a {
  display: inline-block;
  line-height: 1.45;
  height: 21px;
  width: 100%;
  padding: 3px 6px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: solid 1px red;
  background-color: yellow;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<ul>
  <li><a href="https://stackoverflow.com/">Stackoverflow</a></li>
  <li><a href="https://jsfiddle.net">JsFiddle</a></li>
  <li><a href="https://example.com" title='XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx'>XXXXXXXxxxxx XXXXXXX XXXX XXXXXX XXXXX  x  xxxXXXXX XXXXXXxxx XXX XXXXxxxxxx xxxxxxxxxxxxxXXXx xxxxxxxx </a></li>
</ul>

Pseudo-Element state - How to append a style to the state of after/before?

Only put a hover on the .nav-item, not on the pseudo elements
The hover on .nav-item also controls whether or not the pseudo elements are shown.

Look at: https://jsfiddle.net/xqe3vqmt/1/

EDIT: updated version: https://jsfiddle.net/xqe3vqmt/2/ (see comments below)

Also notice how I made the use of gradients unneccesary

HTML:

<div id="header"> 
    <a class="nav-item">START</a>
    <a class="nav-item">GRUPPEN</a>
    <a class="nav-item">HILFE</a>
</div>

CSS:

#header {
    margin-top:2em;
}
.nav-item {
    width: 120px;
    display:inline-block;
    position:relative;
    font-family:arial, helvetica;
    text-align:center;
    height:3em;
    line-height:3em;
    margin:0 1.5em;
    cursor:pointer;
}
.nav-item:before, .nav-item:after {
    content:"";
    width:0;
    height:0;
    border:1.5em solid transparent;
    position:absolute;
    top:0;
}
.nav-item:before {
    right:100%;
}
.nav-item:after {
    left:100%;
}
.nav-item:hover {
    background:black;
    color:white;
}
.nav-item:hover:before {
    border-right-color:black;
    border-top-color:black;
}
.nav-item:hover:after {
    border-left-color:black;
    border-bottom-color:black;
}

Style sheet contains ::after pseudo-element behaves differently in react js compared to html/css

Problem

The problem appears to stem from text-align: justify. You'll only find support for justify in react native.

You can confirm this lack of support by running this React snippet below and see how justify works when not wrapped within the div root:

const {Fragment} = React;

const Example = () => {
  return (
   <Fragment>
      <h1>React</h1>
      <ul className="timeline">
        <li data-text="order placed" data-year="1/1/2020::45:30"></li>
        <li data-text="order accepted" data-year="1/1/2020:9:45:42"></li>
        <li data-text="order processed" data-year="1/1/2020:11:45:34"></li>
      </ul>
    </Fragment>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

.timeline {
  width: 500px;
  height: 20px;
  list-style: none;
  text-align: justify;
  margin: 80px auto;
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(255, 255, 255, 0)),
    color-stop(45%, rgba(255, 255, 255, 0)),
    color-stop(51%, rgba(191, 128, 11, 1)),
    color-stop(57%, rgba(255, 255, 255, 0)),
    color-stop(100%, rgba(255, 255, 255, 0))
  );
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(255, 255, 255, 0)),
    color-stop(45%, rgba(255, 255, 255, 0)),
    color-stop(51%, rgba(191, 128, 11, 1)),
    color-stop(57%, rgba(255, 255, 255, 0)),
    to(rgba(255, 255, 255, 0))
  );
  background: -o-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(191, 128, 11, 1) 51%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(191, 128, 11, 1) 51%,
    rgba(255, 255, 255, 0) 57%,
    rgba(255, 255, 255, 0) 100%
  );
}

.timeline:after {
  display: inline-block;
  content: "";
  width: 100%;
}

.timeline li {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #064213;
  text-align: center;
  line-height: 1.2;
  position: relative;
  border-radius: 50%;
}

.timeline li:before {
  display: inline-block;
  content: attr(data-year);
  font-size: 12px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
  top: -40px;
}

.timeline li:nth-child(even):before {
  bottom: -40px;
}

.timeline li:after {
  display: inline-block;
  content: attr(data-text);
  font-size: 16px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.timeline li:nth-child(odd):after {
  bottom: 0;
  margin-bottom: -10px;
  -webkit-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
}

.timeline li:nth-child(even):after {
  top: 0;
  margin-top: -10px;
  -webkit-transform: translate(-50%, -100%);
  -ms-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}
.example {
  display: -ms-grid;
  display: grid;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(white),
    to(black)
  );
  background: -o-linear-gradient(top, white, black);
  background: linear-gradient(to bottom, white, black);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Example created using Stackoverflow snippet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <h1>Native HTML</h1>
    <ul class="timeline">
      <li data-text="order placed" data-year="1/1/2020::45:30"></li>
      <li data-text="order accepted" data-year="1/1/2020:9:45:42"></li>
      <li data-text="order processed" data-year="1/1/2020:11:45:34"></li>
    </ul>
    <br />
    <div id="root"></div>
  </body>
</html>

How to write a conditional css pseudo-element with styled-components?

it does not seem to be working.

The syntax itself is alright, but you are missing the content prop. content is essential, because unless specified, the pseudo element will not appear.

&::before {
    border-color: red;
    border-style: solid;
    border-width: 0.1rem;
    content: 'abc'; // it can be anything, even empty string
}

https://codesandbox.io/s/sad-sound-j5czon?file=/src/App.js:385-506

Styling part of pseudo-element

If your :before pseudo-element content is displayed inline along with the content of the generating element, you can still target :first-line or :first-letter separately and it should override :before for the first line or letter of the generated content, respectively:

div {
    width: 100px;
}

div:before {
    content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
}

div:first-line { font-weight: bold; }
div:first-letter { color: red; }

Beyond that, you can't reliably target parts of :before or :after pseudo-elements with CSS, as pseudo-elements cannot generate other pseudo-elements in CSS2.1, only real elements can. If you need to style the first letter of appended content, use JavaScript to append that content first.

List of html elements that support the CSS :before and :after pseudo elements

I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work.

If it says "it works" in green letters, that element is supported.

*:not(br):after {
  content: 'it works';
  font-weight: bold;
  padding: 5px;
  color: green;
}

<a>Name: a</a> <br />
<abbr>Name: abbr</abbr> <br />
<address>Name: address</address> <br />
<area>Name: area</area> <br />
<article>Name: article</article> <br />
<aside>Name: aside</aside> <br />
<audio>Name: audio</audio> <br />
<b>Name: b</b> <br />
<base>Name: base</base> <br />
<bdo>Name: bdo</bdo> <br />
<blockquote>Name: blockquote</blockquote> <br />

<body>Name: body</body> <br />
<br>Name: br</br> <br />
<button>Name: button</button> <br />
<canvas>Name: canvas</canvas> <br />
<caption>Name: caption</caption> <br />
<cite>Name: cite</cite> <br />
<code>Name: code</code> <br />
<col>Name: col</col> <br />
<colgroup>Name: colgroup</colgroup> <br />
<command>Name: command</command> <br />
<datalist>Name: datalist</datalist> <br />
<dd>Name: dd</dd> <br />
<del>Name: del</del> <br />
<details>Name: details</details> <br />
<dfn>Name: dfn</dfn> <br />
<div>Name: div</div> <br />
<dl>Name: dl</dl> <br />
<dt>Name: dt</dt> <br />
<em>Name: em</em> <br />
<embed>Name: embed</embed> <br />
<eventsource>Name: eventsource</eventsource> <br />
<fieldset>Name: fieldset</fieldset> <br />
<figcaption>Name: figcaption</figcaption> <br />
<figure>Name: figure</figure> <br />
<footer>Name: footer</footer> <br />
<form>Name: form</form> <br />
<h1>Name: h1</h1> <br />
<h2>Name: h2</h2> <br />
<h3>Name: h3</h3> <br />
<h4>Name: h4</h4> <br />
<h5>Name: h5</h5> <br />
<h6>Name: h6</h6> <br />

<head>Name: head</head> <br />
<header>Name: header</header> <br />
<hgroup>Name: hgroup</hgroup> <br />
<hr>Name: hr</hr> <br />
<html>Name: html</html> <br />
<i>Name: i</i> <br />
<iframe>Name: iframe</iframe> <br />
<img>Name: img</img> <br />
<input>Name: input</input> <br />
<ins>Name: ins</ins> <br />
<kbd>Name: kbd</kbd> <br />
<keygen>Name: keygen</keygen> <br />
<label>Name: label</label> <br />
<legend>Name: legend</legend> <br />
<li>Name: li</li> <br />
<link>Name: link</link> <br />
<mark>Name: mark</mark> <br />
<map>Name: map</map> <br />
<menu>Name: menu</menu> <br />
<meta>Name: meta</meta> <br />
<meter>Name: meter</meter> <br />
<nav>Name: nav</nav> <br />
<noscript>Name: noscript</noscript> <br />
<object>Name: object</object> <br />
<ol>Name: ol</ol> <br />
<optgroup>Name: optgroup</optgroup> <br />
<option>Name: option</option> <br />
<output>Name: output</output> <br />
<p>Name: p</p> <br />
<param>Name: param</param> <br />
<pre>Name: pre</pre> <br />
<progress>Name: progress</progress> <br />
<q>Name: q</q> <br />
<ruby>Name: ruby</ruby> <br />
<rp>Name: rp</rp> <br />
<rt>Name: rt</rt> <br />
<samp>Name: samp</samp> <br />
<script type="application/json">Name: script</script> <br />
<section>Name: section</section> <br />
<select>Name: select</select> <br />
<small>Name: small</small> <br />
<source>Name: source</source> <br />
<span>Name: span</span> <br />
<strong>Name: strong</strong> <br />
<style>Name: style</style> <br />
<sub>Name: sub</sub> <br />
<summary>Name: summary</summary> <br />
<details>Name: details</details> <br />
<sup>Name: sup</sup> <br />
<table>Name: table</table> <br />
<tbody>Name: tbody</tbody> <br />
<td>Name: td</td> <br />
<textarea>Name: textarea</textarea> <br />
<tfoot>Name: tfoot</tfoot> <br />
<th>Name: th</th> <br />
<thead>Name: thead</thead> <br />
<time>Name: time</time> <br />
<title>Name: title</title> <br />
<tr>Name: tr</tr> <br />
<ul>Name: ul</ul> <br />
<var>Name: var</var> <br />
<video>Name: video</video> <br />
<wbr>Name: wbr</wbr> <br />

---

Related Topics