Add CSS pseudo element to SVG

Asked Jul 02 '18 at 10:58

Active Jul 02 '18 at 11:03

Viewed 54 times

Is there a way to Add CSS pseudo element to an SVG? I wish to add text to the SVG element with the content: (); property.

Codepen is here

.grade1 {
  stroke: #07FF00;
  stroke-width: 3;
  fill: #BBFFA6;
}

.grade1::after {
  content: "Grade 1";
  width: 40px;
  height: 40px;
}

<svg xmlns="http://www.w3.org/2000/svg" width="43.4" height="43.4">
       <circle class="grade1" cx="21.7" cy="21.7" r="19.2"></circle>
    </svg>

edited Jul 02 '18 at 11:03

Turnip

asked Jul 02 '18 at 10:58

MrThunder

why not a simple text element ? – Temani Afif Jul 02 '18 at 11:01
@Alexander not a duplicate, it's not about the SVG as a content .. but to add content to the SVG – Temani Afif Jul 02 '18 at 11:02
@Alexander, Turnip saved you :p – Temani Afif Jul 02 '18 at 11:03
@TemaniAfif, I'm sorry :) – Alexander Jul 02 '18 at 11:05
@Temani I wanted to add text and styles with css which would give me way more control – MrThunder Jul 02 '18 at 11:10
@Turnip this in not a duplicate, I am adding content with a pseudo element not styling it. Thanks – MrThunder Jul 02 '18 at 11:12
1

it's a duplicate because the answer is simply : "you cannot use pseudo element" and this is what the duplicate explain – Temani Afif Jul 02 '18 at 11:14

0 Answers0