SVG元素无法使用::after伪元素的解决方案咨询

Hey there, let's break down why your SVG's ::after pseudo-element isn't working, and how to fix it quickly!

Why it's not working #

SVG elements don't support CSS pseudo-elements like ::before or ::after at all. Unlike HTML elements, SVG has its own separate DOM and rendering model—pseudo-elements are a CSS feature built for HTML's document tree, and SVG just doesn't recognize them as valid child nodes.

The easiest fix: Wrap SVG in an HTML container #

The simplest solution is to put your SVG inside a regular HTML element (like a <div>) and apply the ::after style to that container instead. Here's how to adjust your code:

Updated CSS

/* Style the container instead of the SVG directly */
.svg-wrapper {
  font-style: normal;
  color: #fff;
  height: 30px;
  width: 30px;
  background-color: red;
  line-height: 30px;
  display: block;
  text-align: center;
  border-radius: 50%;
  position: relative;
}

/* Now this pseudo-element will work perfectly */
.svg-wrapper::after {
  position: absolute;
  left: 50%;
  margin-left: -12px;
  top: 80%;
  content: '';
  height: 0;
  width: 0;
  border-top: 15px solid red;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

/* Keep SVG styles to match the container size */
svg {
  height: 30px;
  width: 30px;
}

Updated HTML

<div class="svg-wrapper">
  <svg class="svg-inline--fa fa-bars fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
  </svg>
</div>

Alternative: Use SVG-native elements #

If you don't want to add an extra container, you can replicate the pseudo-element effect directly inside the SVG using SVG's own elements (like <path>). For example, to add that downward-pointing triangle:

<svg class="svg-inline--fa fa-bars fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
  <path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
  <!-- SVG-native triangle matching your original pseudo-element -->
  <path fill="red" d="M224 420 L200 450 L248 450 Z" transform="scale(0.1) translate(0, 180)" />
</svg>

You'll need to tweak the d path data and transform values to get the exact position and size you want, but this keeps everything inside the SVG without extra HTML.

内容的提问来源于stack exchange，提问作者Sabbir Ahmad