Question

我希望只有一个 <span>有三行（下划线，删除线和上划线），如下所示:(这只是示例，我想动态更改它）

但我不能在这样的一个元素中使用少量text-decorations：

span {
    text-decoration: overline dotted green;
    text-decoration: line-through wavy aqua;
    text-decoration: underline double red;
}

如何使用一个<span>执行此操作？也许我可以使用::after和::before或其他语言，如SASS或LESS？
谢谢你的帮助。

Answer 1

使用display:inline-block和border-top以及border-bottom和text-decoration

span{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double red;
  text-decoration: line-through wavy aqua;
}

<span>Some Text</span>

第一条评论

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
}
	
span:before {
  position: absolute;
  content: "Some Text";
  left: 0;
  top: 0;
  text-decoration: overline wavy black;
  z-index:-1;
  color:white;
}

<span>Some Text</span>

上次发表评论

span{
  display:inline;
  text-decoration: line-through wavy aqua;
  font-size:22px;
  position: relative;
}
span:after {
  position: absolute;
  content: "S";
  left: 0;
  top: -100%;
  text-decoration: underline wavy black;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}
	
span:before {
  position: absolute;
  content: "S";
  left: 0;
  top: 0;
  text-decoration: underline wavy red;
  z-index:-1;
  color:white;
  width: 100%;
  letter-spacing: 1000px;
  overflow: hidden;
}

<span>Some Text</span>

Answer 2

尝试使用显示块和边框

＆＃13;

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://services.samples">
  <soapenv:Header/>
    <soapenv:Body>
      <bas:setMOAttributes xmlns:bas="http://www.3gpp.org/ftp/Specs/archive/32_series/32607/schema/32607-700/BasicCMIRPData">
        <queryXpathExp>
          <soap:baseObjectInstance xmlns:soap="http://www.alcatel-lucent.com/soap_cm">
            hello
          </soap:baseObjectInstance>
        </queryXpathExp>
     </bas:setMOAttributes>
   </soapenv:Body>
</soapenv:Envelope>

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<proxy xmlns="http://ws.apache.org/ns/synapse"
       name="test2"
       startOnLoad="true"
       statistics="disable"
       trace="disable"
       transports="http,https">
    <target>
      <inSequence>
         <property expression="$body/*[1]"
                   name="INPUT_MESSAGE"
                   scope="default"
                   type="STRING"/>
         <enrich>
            <source clone="true" type="inline">
               <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">
                  <soapenv:Header/>
                  <soapenv:Body>
                     <list xmlns=""/>
                  </soapenv:Body>
               </soapenv:Envelope>
            </source>
            <target type="envelope"/>
         </enrich>
         <enrich>
            <source clone="true" property="INPUT_MESSAGE" type="property"/>
            <target type="body"/>
         </enrich>
         <respond/>
      </inSequence>
   </target>
   <description/>
</proxy>

＆＃13;

Answer 3

span1 {
    text-decoration: line-through overline underline dotted green;;
}
span2 {
    text-decoration: line-through overline underline wavy aqua;
}
span3 {
    text-decoration: line-through overline underline double red;
}

<span1>Some text</span1>
<span2>Some text</span2>
<span3>Some text</span3>

Answer 4

<span>Text decoration</span>

int a = 10;
int b = 20;
a = a + b;

Answer 5

希望以下代码可以帮助您

<!DOCTYPE html>
<html>
<head>
<style>
span1{
    text-decoration: underline;
}
span2{
    text-decoration: line-through;
}
span3{
    text-decoration: overline;
}
</style>
</head>
<body>
<span3><span2><span1>sometext</span1></span2></span3>
</body>
</html>

Answer 6

示例：

＆＃13;

span:first-child{
  display:inline-block;
  border-top:dotted 1px #000;
  border-bottom:thick double #ff0000;
  text-decoration: line-through wavy aqua;
}

＆＃13;

<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>
<span>Some Text</span>

＆＃13;

CSS - 在一个元素中使用下划线，删除线和上划线（使用样式和颜色）

6 个答案: