使用 :after selective 进行内联样式设置

Question

我有下面这样的风格sheet，

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>

但是在我的网络规则中，我不能使用标签

所以我必须使用 like

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

如何在这种风格中使用h3:after？

Answer 1

您不能添加 pseudo 运算符 inline Style，因为 Pseudo 运算符仅适用于 CSS classes 和 Ids

并且您正在考虑添加具有 style 属性的 pseudo 运算符，这是不可能的，
有关详细信息，请访问此文章。这会帮助你 https://www.w3.org/TR/css-style-attr/

Answer 2

无法在内联 CSS 中使用 pseudo。如果你想使用 pseudo 那么你必须使用它 internal CSS 或 External CSS.

Answer 3

您可以在不需要伪元素的情况下以不同的方式重新创建相同的内容。

^{只缺小影子}

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

使用 :after selective 进行内联样式设置

Use :after selective for inline style setting

html

css

pseudo-class