CODEWITHSUNDEEP
htmlcsspseudo-class
whitebear
whitebear

Reputation: 12461

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??

Upvotes: 0

Views: 1180

Answers (3)

Temani Afif
Temani Afif

Reputation: 274307

You can recreate the same differently without the need of pseudo element.

Only the small shadow is missing

<h3 style="background:
    linear-gradient(to bottom right,#fff 49%,#a8d4ff 50%) 0 0/15px 15px border-box,
    repeating-linear-gradient(to right, #fff 0 4px,transparent 4px 8px) top/100% 2px,
    repeating-linear-gradient(to right, #fff 0 4px,transparent 4px 8px) bottom/100% 2px,
    repeating-linear-gradient(to bottom,#fff 0 4px,transparent 4px 8px) left/2px 100%,
    repeating-linear-gradient(to bottom,#fff 0 4px,transparent 4px 8px) right/2px 100%,
    #dfefff;
  background-repeat:no-repeat;
  border:5px solid transparent;
  padding: 0.2em 0.5em;
  color: #454545;">Title</h3>

Upvotes: -1

Sumit Patel
Sumit Patel

Reputation: 4638

There is no way possible to use pseudo in inline CSS. if you want to use the pseudo then you have to use it internal CSS or External CSS.

Upvotes: 1

Dupinder Singh
Dupinder Singh

Reputation: 7789

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/

Upvotes: 1

Related Questions