1

我有一些需要以下内容的文本：

  • 文本周围的边框
  • 具有自己的边框和背景颜色的 ::before 元素

基本上，我希望它看起来像这样：

在此处输入图像描述

到目前为止，我有这个：

在此处输入图像描述

我的 CSS：

 .caution {
    border: 0.5pt solid black;
    padding-left: 3pt; 
    padding-right: 3pt;
   display: table;
}

.caution::before {
    display: table-cell;
    border: 0.5pt solid black;
    background-color: #deddde;
    text-align: center;
    content: "caution";
}

我的html：

<p class="caution">Caution text</p>

结果是 ::before 框嵌套在 .caution 框内，而不是重叠。左侧和右侧的空白是由padding-leftandpadding-right语句引起的。

我也试过没有显示：表，但没有帮助。我需要padding-leftandpadding-right应用于文本（以确保文本不会正好到达边界），但不适用于 ::before 元素。没有选择器允许我将属性应用于“除 ::before 元素之外的所有 .caution”。

我怎样才能让边界按照我想要的方式运行？

4

3 回答 3

2

你可以试试这个——它并不完美，但它是一个开始:)

.caution {
  border: 0.5pt solid black;
  display: inline-block;
  max-width: 200px;
  padding: 10px;
}

.caution::before {
  display: block;
  border-bottom: 0.5pt solid black;
  margin: -10px;
  margin-bottom: 10px;
  background-color: #deddde;
  text-align: center;
  content: "Caution";
}

它将呈现以下内容：

在此处输入图像描述

于 2020-07-31T14:49:23.587 回答
1

仅设置border-bottom（如 Yogendra Chauhan 的回答，尽管我后来才注意到）可以提供帮助：

.caution {
    border: 0.5pt solid black;
    padding-left: 3pt; 
    padding-right: 3pt;
    display: block;
}

.caution::before {
    border-bottom: 0.5pt solid black;
    background-color: #deddde;
    text-align: center;
    content: "caution";
    display: block;
    margin: 0 -3pt;
}

但是，当您在 PDF 查看器中放大到 6,400% 时，您可能会在底部边框的末端看到一条小白线。

于 2020-07-31T16:22:41.993 回答
0

这是工作示例：

.caution {
    position: relative;
    border: 1px solid #000000;
    height: 200px;
    width: 300px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 30px;
}

.caution::before {
    position: absolute;
    background-color: #deddde;
    text-align: center;
    content: "caution";
    text-transform: capitalize;
    display: block;
    width: 100%;
    border-bottom: 1px solid #000000;
    top: 0;
    left: 0;
    line-height: 25px;
}
<div class="caution">Caution text</div>

于 2020-07-31T14:59:49.617 回答