如何在 divi WordPress 主题中添加带有 html/css 行的 behind/under 文本

Question

所以我想在我的文本中添加一行 behind/under 我已经部分完成了（见附件。）

为了获得上述结果，我将以下代码添加到 Divi 主题的文本模块自定义 css 选项的 :after 部分：

content: '';
position: absolute;
bottom: 15px !important;
left: 6px;
right: -10px;
height: 13px;
background: #25c6fe;
width: 19.8%;

我有两个个问题：

保存页面时，它会将线放在文本下方。
如果我将文本居中，该行将保持在左侧

我该如何解决这些问题？我认为 css 是错误的？

Answer 1

如果您尝试使用 :after 来制作您想要的样式，可能会导致不必要的复杂 css 代码。从 width 属性开始，它应该始终具有元素的长度，因为您希望整个文本都带有下划线，无论它有多长。所以我建议您尝试使用 background-image 属性来使事情正常进行：

.your_textmodule_class {
    color: black;
    background-image: linear-gradient(180deg, transparent 85%, #25c6fe 0);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

使用透明百分比值，可以设置线条的高度。如果您希望线条具有更高的高度，请使用更少的百分比。看看你的形象，我想 linear-gradient(180deg, transparent 70%, #25c6fe 0) 可能是你想要达到的目标。

Answer 2

好的，去掉整个 class 和样式以及您为该下划线栏制作的所有相关内容，并通过仅添加到您的 .et_pb_text_1 CSS 来这样做。添加此 border-bottom: 10px solid #25c6fe 并将其显示为 table 单元格。

像这样：

.et_pb_text_1 {
  border-bottom: 10px solid #25c6fe;
  display: table-cell
}

Answer 3

这里你可以试试：

.mytext{
color: black;
    background-image: linear-gradient(180deg, transparent 70%, #25c6fe 0);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<h1 class="mytext">Host an event</h1>

希望它有效。 :)

如何在 divi WordPress 主题中添加带有 html/css 行的 behind/under 文本

How to add line behind/under text with html/css in the divi WordPress theme

html

css

wordpress

divi-theme