为什么 CSS 伪元素在图像中不起作用

Question

首先，我试图在堆栈溢出中找到类似问题的答案，但结果仍然相同，它没有显示我的意思。

所以这是我的 html 结构：

<div class="header__shape">
            <img src="img/rose.png" alt="rose couples" class="header__shape-img">
            <p class="header__shape-quote">
                Being someone’s first love may be great, <br>
                but to be their last is beyond perfect.
            </p>
</div>

这是我的 css 以及伪 ::before

&-quote{
            position   : absolute;
            font-size  : $font-size-2;
            font-family: $font-secondary;
            color      : $color-font;
            line-height: 1.3;
            right      : 45rem;
            top        : 45rem;

            &::before{
                content         : "";
                background-image: url(../../img/quote.png);
                height          : 50px;
                display         : block;
                width           : 50px;

            }
        }

我想要的是这样的 but in reality nothing happen

Answer 1

您可以尝试添加 <q> 标签，因此如果您想为 <q> 标签添加 CSS，您可以添加 CSS class

<div class="header__shape">
            <img src="pic_trulli.jpg" alt="rose couples" class="header__shape-img">
            <p><q>
                Being someone’s first love may be great, <br>
                but to be their last is beyond perfect.</q>
            </p>
</div>

Answer 2

这是我的解决方法。首先你需要给父级一个 position: relative 以便在 div

中移动 p 标签

然后给 pseudo-element 绝对位置，使其在 p 标签周围移动。

.header__shape {
    position: relative;
}

.header__shape-quote {
    line-height: 1.3;
    font-size: 3rem;
    color: red;
    position: absolute;
    right: 30rem;
    top: 40rem;

}

.header__shape-quote::before {
    font-size: 4rem;
    position: absolute;
    top: -50px;
    left: -60px;
    /* must have for fontawesome */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f10e";
}

并以不同的方式。我个人推荐这个。在上面的例子中绝对。但我不知道哪个更适合你。所以我添加了两个

.header__shape {
  position: relative;
}

.header__shape-quote {
  line-height: 1.3;
  font-size: 3rem;
  color: red;
  margin-left: 5rem;
  margin-top: 5rem;
  position: relative;
}

.header__shape-quote::before {
  font-size: 4rem;
  position: absolute;
  top: -50px;
  left: -60px;
  /* must have for fontawesome */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f10e";
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<div class="header__shape">
  <img src="https://picsum.photos/600" rose couples class="header__shape-img">
  <p class="header__shape-quote">
    Being someone’s first love may be great, <br> but to be their last is beyond perfect.
  </p>
</div>

编辑

使用资产很正常。只需在 URL 中添加路径并给它 height 和 width 就可以了。

.header__shape {
  position: relative;
}

.header__shape-quote {
  line-height: 1.3;
  font-size: 3rem;
  color: red;
  margin-left: 5rem;
  margin-top: 5rem;
  position: relative;
}

.header__shape-quote::before {
  font-size: 4rem;
  position: absolute;
  top: -50px;
  left: -60px;
  /* must have for fontawesome */
  display: inline-block;
  /* content: url('../images/caret-down-solid.svg'); */
  content: url("https://picsum.photos/40");
}

<div class="header__shape">
  <img src="https://picsum.photos/600" rose couples class="header__shape-img">
  <p class="header__shape-quote">
    Being someone’s first love may be great, <br> but to be their last is beyond perfect.
  </p>
</div>

您也可以将其添加为 background-image，而不是在 content 中添加 URL。完全没问题。

.header__shape {
  position: relative;
}

.header__shape-quote {
  line-height: 1.3;
  font-size: 3rem;
  color: red;
  margin-left: 5rem;
  margin-top: 5rem;
  position: relative;
}

.header__shape-quote::before {
  font-size: 4rem;
  position: absolute;
  top: -50px;
  left: -60px;
  /* must have for fontawesome */
  display: inline-block;
  content: "";
  height: 40px;
  width: 40px;
  /*  background: url('../images/caret-down-solid.svg') no-repeat;  that works fine i'm just using external link  */
  background: url('https://picsum.photos/40') no-repeat;
}

<div class="header__shape">
  <img src="https://picsum.photos/600" rose couples class="header__shape-img">
  <p class="header__shape-quote">
    Being someone’s first love may be great, <br> but to be their last is beyond perfect.
  </p>
</div>

随意选择最适合你的方式。

这没有帮助？请让我知道。我会尽力提供帮助。

Answer 3

将浮动、background-size 属性添加到 pseudo-element 的样式中，如下所示：

&-quote {
        position   : absolute;
        font-size  : $font-size-2;
        font-family: $font-secondary;
        color      : $color-font;
        line-height: 1.3;
        right      : 45rem;
        top        : 45rem;

        &::before {
            content         : "";
            background-image: url(../../img/quote.png);                
            height          : 50px;
            width           : 50px;
            /* new properties */
            float: left;
            background-size: contain;
        }
}

为什么 CSS 伪元素在图像中不起作用

Why CSS Pseudo Element not Working in Image

html

css

pseudo-element

编辑

随意选择最适合你的方式。