自定义文本下划线(使用 + 和 - 符号)
Custom text underline(using + and - symbols)
我需要实现自定义文字装饰,见下图:
使用下一个样式模拟 -
行很简单:
color: red;
border-bottom: 3px dashed; // 3px - just for example, 2.5 also looks fine.
但我找不到如何使用 +
符号实现下划线。
实际上,我知道可以有 background-image
,但如果文本很长,它就不会工作。
如有任何帮助,我将不胜感激。提前谢谢你。
更新:
可玩的简单代码片段:
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
你可以像下面这样用渐变来做到这一点:
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0px 1px,transparent 1px 5px)
bottom 0 left 2px/100% 5px no-repeat,
linear-gradient(green,green) bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
如果你想在 +
之间留一些空格
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px)
bottom 0 left 2px/100% 5px no-repeat,
repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px)
bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
它也适用于多行文本:
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px)
bottom 0 left 2px/100% 5px no-repeat,
repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px)
bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This is long long long long long long long long long long text was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
理想的方式是使用 javascript,但是使用 css 是可能的,并且必须适应响应,您将创建一个包含许多 +
和限制大小只占用必要的,按照示例
.add:after{
content: "++++++++++++++++++++++++++++++++++++++++++++++++++";
color: green;
font-size: 12px;
position: relative;
top: 17%;
overflow: hidden;
display: block;
}
.after-75:after{
width:75%;
}
.add{
width: fit-content;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="add after-75">We need underline</h1>
这是最高效的解决方案。
.added {
color: green;
position: relative;
}
.added:after {
left: 0;
right: 0;
top: 100%;
height: 5px;
content: '';
position: absolute;
background-size: contain;
background-repeat: repeat-x;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" fill="green" height="24" viewBox="0 0 24 24"%3E%3Cpath d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/%3E%3C/svg%3E');
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span>
</p>
</main>
我需要实现自定义文字装饰,见下图:
使用下一个样式模拟 -
行很简单:
color: red;
border-bottom: 3px dashed; // 3px - just for example, 2.5 also looks fine.
但我找不到如何使用 +
符号实现下划线。
实际上,我知道可以有 background-image
,但如果文本很长,它就不会工作。
如有任何帮助,我将不胜感激。提前谢谢你。
更新: 可玩的简单代码片段:
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
你可以像下面这样用渐变来做到这一点:
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0px 1px,transparent 1px 5px)
bottom 0 left 2px/100% 5px no-repeat,
linear-gradient(green,green) bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
如果你想在 +
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px)
bottom 0 left 2px/100% 5px no-repeat,
repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px)
bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
它也适用于多行文本:
.deleted {
background:
repeating-linear-gradient(to right,red 0 4px,transparent 4px 6px)
bottom/100% 2px no-repeat;
}
.added {
background:
repeating-linear-gradient(to right,green 0 1px,transparent 1px 7px)
bottom 0 left 2px/100% 5px no-repeat,
repeating-linear-gradient(to right,green 0 5px,transparent 5px 7px)
bottom 2px left 0/100% 1px no-repeat;
padding-bottom:4px;
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This is long long long long long long long long long long text was inserted.</span> More text <span class="deleted">This was deleted</span></p>
</main>
理想的方式是使用 javascript,但是使用 css 是可能的,并且必须适应响应,您将创建一个包含许多 +
和限制大小只占用必要的,按照示例
.add:after{
content: "++++++++++++++++++++++++++++++++++++++++++++++++++";
color: green;
font-size: 12px;
position: relative;
top: 17%;
overflow: hidden;
display: block;
}
.after-75:after{
width:75%;
}
.add{
width: fit-content;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="add after-75">We need underline</h1>
这是最高效的解决方案。
.added {
color: green;
position: relative;
}
.added:after {
left: 0;
right: 0;
top: 100%;
height: 5px;
content: '';
position: absolute;
background-size: contain;
background-repeat: repeat-x;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" fill="green" height="24" viewBox="0 0 24 24"%3E%3Cpath d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/%3E%3C/svg%3E');
}
<main>
<h1>Here goes some heading <span class="deleted">and this is deleted</span></h1>
<p>And here goes more text. <span class="added">This was inserted.</span> More text <span class="deleted">This was deleted</span>
</p>
</main>