如何在 divi WordPress 主题中使用 html/css 在文本后面/下方添加行答案

【问题标题】：How to add line behind/under text with html/css in the divi WordPress theme如何在 divi WordPress 主题中使用 html/css 在文本后面/下方添加行
【发布时间】：2021-11-16 05:26:20
【问题描述】：

所以我试图在我已经部分完成的文本后面/下面添加一行（见附件。）

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

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

我有两个问题：

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

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

【问题讨论】：

发生这种情况的原因有十亿个。如果您的网站在线，您可以发布指向您网站的链接吗？如果不能，您可以发布您的 html 代码吗？

标签： html css wordpress divi-theme

【解决方案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) 这样的东西可能是你想要实现的目标。

【讨论】：

稍微偏向一侧，您的意思是该行开始比文本早一点吗？您可以通过将“padding”设置为您喜欢的一侧（即 padding-left：20px;），并采用相同的值作为负的“margin”（margin-left：-20px;）具有相同的位置文本和以前一样。
非常感谢。我必须在左侧使用负边距，在右侧使用正填充才能使其正常工作。

【解决方案2】：

好的，去掉你为那个下划线栏制作的整个类和样式以及关于它的所有内容，并通过只添加到你的.et_pb_text_1 CSS 来做到这一点。添加此border-bottom: 10px solid #25c6fe 并将其显示为表格单元格。

像这样：

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

【讨论】：

非常感谢。我只是想弄清楚那个巨大的白色差距
忽略after 部分，我更新了我的代码。还添加了 display: table-cell 但你应该使用border-bottom: 10px solid #25c6fe; 来做这个效果，不要做一个单独的项目来做，
知道如何对齐这些吗？如果是这样，请告诉我，我会发布另一个问题
你要对齐什么？
好的，我查看了您的网站，请执行以下操作：.et_pb_section_1.et_pb_section { display: flex; justify-content: center;}，它应该可以满足您的需求。

【解决方案3】：

你可以在这里试试：

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

&lt;h1 class="mytext"&gt;Host an event&lt;/h1&gt;

希望它有效。 :)

【讨论】：