0

Here I want to add a pseudo-element to the SVG path. I had tried :after element is shown in the console but not visible. Here I want to add pseudo-class to SVG path. Can anyone suggest to me how can I achieve this output. Is it possible if not then what will be the alternate way to do this? Any kind of help will be appreciated.

.container{
  width: 500px;
  margin:50px auto;
  position:relative;
  text-align:center;
}

.test {
    position: relative;
}
.test:after {
    content: '';
    display: block;
    position: absolute;
        top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: red;
    z-index: 999999;
}
<div class='container'>
  <svg height="400" width="500">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
    stroke-width="3" fill="none" />
    <path id="lineBC" class="test" d="M 250 50 l 150 300" stroke="red"
    stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
    fill="none" />
    <path d="M 100 350 q 150 -300 300 0" stroke="blue"
    stroke-width="5" fill="none" />
  </svg>
 
</div>
Husna
  • 1,286
  • 4
  • 19
  • 48
  • Your followup about how to "do this" isn't very clear. You haven't explained what you're trying to accomplish. Feel free to open a new question or revise this one to ask about that with more detail. – isherwood Nov 18 '20 at 15:28
  • @ isherwood Above suggested question is not helpful to me. There added pseudo-class to direct SVG here I'm trying to add pseudo-class to svg path.This question is not duplicate can you please reopen my question – Husna Nov 18 '20 at 15:30
  • It is a duplicate. The reasons are the same--the path is also a replaced element. – isherwood Nov 18 '20 at 16:10
  • While there's no answer, the comments on [this question](https://stackoverflow.com/questions/40358051/using-pseudo-elements-on-svg-sub-elements) agree. – isherwood Nov 18 '20 at 16:11

0 Answers0