:first-line css – 在 Safari 中工作，而不是 Firefox/Chrome

Question

我想在此处设置此图片库的样式； https://www.obviotec.com/about-us/meet-the-team21-2/ „NAME" 粗体且大于 "job title".

这在使用“first-line”和 css 的 Safari 中工作正常，但在 Firefox/Chrome 中却不行，尽管它应用于块元素。有人知道为什么吗？

代码如下：

<style>
/* <![CDATA[ */

 /*Galerie Image-Transformation OnHover
----------------------------------------------*/
#cc-m-9319617175 .ccgalerie .thumb_sq2 {
    background: #fff;
}
#cc-m-9319617175 .ccgalerie .thumb_sq2 img {
    transform: scale(1.00);
    transition: all 0.25s ease-in;
}
#cc-m-9319617175 .ccgalerie .thumb_sq2:hover img {
    transform: scale(1.02);
    opacity: 0.15;

}
#gallery_thumb_6016969275:hover:after,  
#gallery_thumb_6016969375:hover:after,
#gallery_thumb_6016969475:hover:after,
#gallery_thumb_6016969575:hover:after  {

    position: absolute;
    display: block;
    width: 150px;
    margin-top:-50px; margin-left:0px;
    z-index: 9999;
    font-size: 14px;
    font-weight:normal;
    color: white;
    text-align: center;
    background-color: #333;
}
#gallery_thumb_6016969275:first-line,
#gallery_thumb_6016969375:first-line,
#gallery_thumb_6016969475:first-line,
#gallery_thumb_6016969575:first-line {
    font-size: 18px;
    font-weight:bold;

} 
#gallery_thumb_6016969275:hover:after {content:"SERENA \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969375:hover:after {content: "Tim \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969475:hover:after {content: "Kaspar \a Marketing \a"; white-space: pre-wrap;}
#gallery_thumb_6016969575:hover:after {content: "Satrajit \a Marketing \a"; white-space: pre-wrap;} 

} 
/*]]>*/
</style>

Answer 1

在 Chrome 上，如果您将 ::first-line 与 ::after 结合使用，则它不起作用（我认为 Firefox 也是如此）。

如果您不是被迫使用 ::after 来插入此人的姓名和头衔，我会避免使用它，而是这样做：

.thumb_sq2 {
  position: relative;
  max-width: 150px;
}

.name-and-title-container {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 0;
  background-color: transparent;
  opacity: 0;
}

.name-and-title-container:hover {
  opacity: 1;
}

.name-and-title {
  /*Layout*/
  position: absolute;
  bottom: 10px;
  width: 100%;
  height: 42px;
  
  /*Styling*/
  background-color: rgb(51,51,51);
  color: white;
  text-align: center;
}

.name {
  display: block;
  font-weight: bold;
}

.title {
  font-size: 0.7em;
}

<div class="thumb_sq2">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=150x150:mode=crop:format=jpg/path/s7e799019368d9bb0/image/i29754b19be01ad53/version/1632830509/image.jpg" alt="">
  <div class="name-and-title-container">
   <div class="name-and-title">
     <span class="name">Name</span>
     <span class="title">Title</span>
    </div>
  </div>
</div>

我的意思是使用任何东西而不是 ::after，我在示例中使用了 <span>，但 <div> 也可以。

:first-line css – 在 Safari 中工作，而不是 Firefox/Chrome

:first-line css – working in Safari, not in Firefox/Chrome

css

google-chrome

firefox

safari

pseudo-element