Search code examples
htmlcsspseudo-class

Use :after selective for inline style setting

I have style sheet like this below,

h3 {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h3:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
<h3>Title</h3>

However in my web regulation, I can't use tag

So I have to use like

<h3 style ="position: relative;background: #dfefff;~~">

How can I use h3:after in this style??

Solution

  • You cannot add pseudo operator inline Style, because Pseudo operators are only workable in CSS classes and Ids

    and you are taking about adding pseudo operator with style attribute, which is not possible,
    For more information visit this article. this will help you https://www.w3.org/TR/css-style-attr/