0

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

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

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

我有两个问题：

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

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

4

3 回答 3

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)可能是你想要实现的。

于 2020-05-15T13:16:59.923 回答
1

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

像这样：

.et_pb_text_1 {
  border-bottom: 10px solid #25c6fe;
  display: table-cell
}
于 2020-05-15T13:48:00.417 回答
0

在这里您可以尝试：

.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>

希望它有效。:)

于 2021-11-15T21:26:20.260 回答