Use :after selective for inline style setting

Question

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

You cannot define, or change, pseudo element styles *inline*. The reason is that you can only apply *rules* in the style attribute, and not use any *selectors*. Because the pseudo elements have no *tag*, there's nothing to put the appropriate `style` attribute on. — connexo, Jul 11 '19 at 05:24
I think it should have been `h3::after`. I don't know what your "regulation" is, but I think changing your css should work. — T Tse, Jul 11 '19 at 05:24
I hate to be one of *those* people, but if your only option is *inline* then use [inline javascript](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin). Sorry. — Martin, Jul 12 '19 at 10:52

score 1 · Accepted Answer · answered Jul 11 '19 at 05:28

1

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/

answered Jul 11 '19 at 05:28

Dupinder Singh

7,175
6
37
61

1

*because Pseudo operators are only workable in CSS classes and Ids* **Double wrong.** 1. There's no such thing as *pseudo **operators***. 2. pseudo **selectors** can be applied to **any** (non-pseudo) selector, not just class and id selectors. – connexo Jul 11 '19 at 05:31
I am just giving the idea :) – Dupinder Singh Jul 11 '19 at 05:33

score 1 · Answer 2 · answered Jul 11 '19 at 05:28

1

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.

answered Jul 11 '19 at 05:28

Sumit Patel

4,530
1
10
28

score -1 · Answer 3 · answered Jul 11 '19 at 08:26

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>

Use :after selective for inline style setting

3 Answers3