แก้ไขความหนาของเส้นของแอตทริบิวต์ "ขีดเส้นใต้" ของ CSS

เนื่องจากคุณสามารถขีดเส้นใต้ข้อความใดก็ได้ใน CSS ดังนี้:

H4 {text-decoration: underline;}

แล้วคุณจะแก้ไข 'เส้น' ที่วาดได้อย่างไรสีที่คุณได้รับบนเส้นนั้นสามารถระบุได้อย่างง่ายดายว่า 'color: red' แต่จะแก้ไขความสูงของเส้นได้อย่างไรเช่นความหนา?

นี่คือวิธีหนึ่งในการบรรลุสิ่งนี้:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

นี่คือตัวอย่าง: http://jsfiddle.net/AQ9rL/

เมื่อเร็ว ๆ นี้ฉันต้องจัดการกับ FF ที่ขีดเส้นใต้หนาเกินไปและอยู่ไกลจากข้อความใน FF มากเกินไปและพบวิธีที่ดีกว่าในการจัดการกับมันโดยใช้กล่องเงาคู่หนึ่ง:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

เงาแรกถูกวางไว้ด้านบนของเงาที่สองและนั่นคือวิธีที่คุณสามารถควบคุมเงาที่สองได้โดยการเปลี่ยนค่า 'px' ของทั้งสอง

บวก: สีต่างๆความหนาและตำแหน่งขีดเส้นใต้

ลบ: ไม่สามารถใช้กับพื้นหลังที่ไม่ทึบ

ฉันได้สร้างตัวอย่างไว้ที่นี่: http://jsfiddle.net/xsL6rktx/

ง่ายมาก ... ภายนอกองค์ประกอบ "ช่วง" ที่มีแบบอักษรขนาดเล็กและขีดเส้นใต้และภายในองค์ประกอบ "แบบอักษร" ที่มีขนาดตัวอักษรที่ใหญ่กว่า

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

อีกวิธีในการทำเช่นนี้คือการใช้ ": after" (องค์ประกอบหลอก) บนองค์ประกอบที่คุณต้องการขีดเส้นใต้

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

นอกจากนี้text-decoration-thicknessในปัจจุบันเป็นส่วนหนึ่งของCSS ข้อความตกแต่งระดับ 4 อยู่ในขั้นตอน "ร่างของบรรณาธิการ" ดังนั้นจึงอยู่ระหว่างดำเนินการและอาจมีการเปลี่ยนแปลงได้ เมื่อวันที่มกราคม 2020 มันได้รับการสนับสนุนใน Firefox และ Safari

คุณสมบัติ CSS text-decoration-thickness ตั้งค่าความหนาหรือความกว้างของเส้นตกแต่งที่ใช้กับข้อความในองค์ประกอบเช่นเส้นผ่านขีดเส้นใต้หรือขีดทับ

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox เท่านั้น)

นอกจากนี้ยังมีtext-decoration-colorซึ่งเป็นส่วนหนึ่งของCSS ข้อความตกแต่งโมดูลระดับที่ 3 สิ่งนี้เป็นผู้ใหญ่มากขึ้น (คำแนะนำสำหรับผู้สมัคร) และได้รับการสนับสนุนในเบราว์เซอร์หลัก ๆ ส่วนใหญ่ (ข้อยกเว้นคือ Edge และ IE) แน่นอนว่าไม่สามารถใช้เพื่อเปลี่ยนความหนาของเส้นได้ แต่สามารถใช้เพื่อให้ได้เส้นใต้แบบ "ปิดเสียง" มากขึ้น (แสดงใน codepen ด้วย)

ฉันจะทำอะไรง่ายๆเช่น:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• คุณสามารถใช้line-heightหรือpadding-bottomตั้งค่าความเป็นไปได้ระหว่างพวกเขา
• คุณสามารถใช้ได้display: inlineในบางกรณี

การสาธิต: http://jsfiddle.net/5580pqe8/

background-imageนอกจากนี้ยังสามารถใช้ในการสร้างขีดเส้นใต้

จะต้องเลื่อนลงbackground-positionและทำซ้ำในแนวนอน สามารถปรับความกว้างของเส้นได้ในระดับหนึ่งโดยใช้background-size(พื้นหลัง จำกัด ไว้ที่กล่องเนื้อหาขององค์ประกอบ)

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

วิธีแก้ไขขั้นสุดท้าย: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

ด้วยความมหัศจรรย์ของตัวเลือก cssใหม่ตอนนี้สามารถทำได้โดยกำเนิด:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

ยังเป็นของการสนับสนุนค่อนข้างยากจน แต่มันจะเข้าสู่เบราว์เซอร์อื่นที่ไม่ใช่ ff ในที่สุด

โซลูชันของฉัน: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

คุณสามารถปรับตำแหน่งขีดเส้นใต้ด้วยค่าความสูงของเส้นขีดเส้นใต้ความหนาและรูปแบบโดยมีขอบล่าง

ระวังการปิดใช้งานพฤติกรรมขีดเส้นใต้เริ่มต้นหากคุณต้องการขีดเส้นใต้ href