Question

我正在尝试添加一个标题，该标题非常类似于带有文字的潜水横幅。如下图所示。

enter image description here

问题是我需要在css中设置标题文本，我有一个div，内容就是这样的。我无法更改HTNL代码来添加内容。

任何想法？

Answer 1

您可以使用before伪元素执行此操作，如下所示：

.your_div:before {
    content: "Your DIV title";
    display: block;
    color: #000;
    background: #CCC;
    text-align: center;
}

但它不会与旧浏览器兼容。

Answer 2

div div{

 
   background-color:brown;
   border:1px solid white;
   text-align:center;
    }
    
    .title{
    height:40px;
   padding-bottom:30px;
    background-color:whitesmoke !important;
    text-align:center;
    }
    .main{
      border-radius:10px;
    border:2px solid red;
    box-shadow:0px 1px 5px 2px black;
    height:content-width;
    
    }

<!Doctype html>
  <html>
  <body>
    <div class="main">
    <div class="title">
    <h2>my title</h2>
    </div>
    
    <div><p>first div</p>
    </div>
    
    <div><p>second div</p>
    </div>
    
    </div>
     </body>
      </html>

仅在CSS中的div顶部添加标题横幅

2 个答案: