当前位置: 首页 > 面试题库 >

伪元素未出现在代码中后

柯梓
2023-03-14
问题内容

我正在尝试使用after伪元素向网站添加一些效果。

<div class="product-show style-show">
  <ul>
    <li>
      ....
      <div class="...">
        <div class="readMore less">...</div>
        <a href="3" class="readMoreLink" onclick="return false;">Read More</a>
      </div>
      ....
    </li>
  </ul>
</div>

和样式表:

.product-show .readMore.less {
   max-height: 200px;
   height: 100%;
   overflow: hidden;
}

.product-show .readMore.less:after {
   background: rgba(255, 255, 255, 0);
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30px;
 }

我看到正在应用.product-show .readMore.less的样式,但是当我从Chrome(最新版本)/
MacOS检查站点时,在HTML块中看不到::after表示法。我读到一些较旧的浏览器有时会出现问题,但是我认为,如果我正确定义样式,我应该至少可以看到:: after伪元素表示法。我究竟做错了什么?


问题答案:

这是因为如果content省略该值,则不会生成伪元素(因为初始值/默认值为none)。

指定一个content值以生成伪元素。值''足够。

.product-show .readMore.less:after {
    content: '';
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
}


 类似资料:
  • 问题内容: 我有一个:before开头的’quote’和一个:after结束的报价。 现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。 有人知道这是否可能吗? 到目前为止,我的代码: 问题答案: 已经提出了嵌套和伪元素的想法;请参阅“生成和替换的内容”模块的这一部分。但是,该模块已被放弃,等待完全重写,因此在重新发布该文档之前,我不会屏息。即便如此,嵌套内容伪元素

  • 我正在尝试简单地登录到这个页面来访问LexisNexis。下面是我的代码: 下面是html源代码:

  • 主要内容:1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词,通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号 与选择器相连。但在 C

  • CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法:selector:pseudo-element {property:value;} CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中,浏览器会根据 "

  • 问题内容: 我正在构建React组件。正如React背后的一位专家在本次精彩的演讲中所建议的那样,我已经在组件中添加了CSS内联。我一直在努力寻找一种方法来内联添加CSS伪类,就像在演示文稿中名为“ :: after”的幻灯片上一样。不幸的是,我不仅需要添加该属性,还需要添加该属性。幻灯片显示了如何通过添加内容,但是如何添加其他属性? 问题答案: 得到了@Vjeux在React团队的回复: 普通H

  • 本文向大家介绍纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示,包括了纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示的使用技巧和注意事项,需要的朋友参考一下 下文以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: 上面你的代码实现了span元素在div中垂直水平居中效果,下面简单介绍一下它的实现过程。 一.实现原理: 虽然css为明确给出