Question

我的主要目标是使用CSS内容属性将内容添加到div的开头。我能够使用以下CSS代码执行此操作：

   .advads::before {
        content: "Advertisement";
        display: block;
    }

现在问题是我需要为内容分配一些css，有条件的background-color和一些padding。有没有办法在不添加HTML的情况下做到这一点？

我实际上想要实现它以添加“ADVERTISEMENT”标题，如下例所示：link to example THX

Answer 1

是。您可以像其他任何一样设置pseudo-elements样式：

＆＃13;

.advads {
    width:200px;
    height:80px;
    background:#aaa;
    position:relative;
}
.advads:after {
    content:"Advertisement";
    display: block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    color:#000;   
    width:100px;
    margin:auto;
    background:#fff;
    text-align:center;
    padding:4px;
}
.advads:before {
    content:"";
    display: block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#ffffff;
    color:#000;
    border-top:1px solid #000;
    margin-top:11px;
}

＆＃13;

<div class="advads">Ad</div>

＆＃13;

Answer 2

是的，只需将必要的属性直接添加到伪元素的规则中，如下所示：

.advads::before{
    background:red;
    content:"Advertisement";
    display:block;
    padding:5px;
}

Answer 3

我认为更好的方法是使用语义HTML和伪元素，如果你想实现类似于提供的例子，那就是这样：

.heading {
  text-align: center;
  position: relative;
  height: 30px;
}
.heading:before {
  content: "";
  border-top: solid 1px #b9b9b9;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 15px;
  display: block;
}
.heading h3 {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  background-color: white;
  display: inline;
  padding: 11px;
  z-index: 5;
  position: relative;
}

<header class="heading">
  <h3>Advertisement</h3>
</header>

是否可以将CSS分配给css的content属性？

3 个答案: