วิธีเพิ่มช่องว่างระหว่างข้อความและขีดเส้นใต้ใน CSS

306

การใช้ CSS เมื่อใช้ข้อความtext-decoration:underlineเป็นไปได้หรือไม่ที่จะเพิ่มระยะห่างระหว่างข้อความและขีดเส้นใต้?

css underline

— maxp
แหล่งที่มา

1

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

— ปีเตอร์ Rowell

ระยะทางจะถูกกำหนดโดยแบบอักษรที่ใช้ ลองแบบอักษรบนเว็บที่ปลอดภัย

— Alexei Danchenkov

1

CSS3 มีคุณสมบัติตกแต่งข้อความใหม่มากมายในปัจจุบัน โปรดตรวจสอบ alligator.io/css/text-decoration ตัวอย่าง: text-underline-position: under;และtext-decoration-skip: ink;โปรดทราบว่านี่อาจไม่เข้ากันได้กับเบราว์เซอร์รุ่นเก่า

— chocolata

1

อีกทางออกที่ดี

— w3spi

1

โหวตtext-underline-offsetที่นี่: bugs.chromium.org/p/chromium/issues/…

— Mark Fisher

356

ไม่มี แต่คุณอาจจะไปกับสิ่งที่ต้องการและborder-bottom: 1px solid #000padding-bottom: 3px

หากคุณต้องการสีเดียวกันของ "ขีดเส้นใต้" (ซึ่งในตัวอย่างของฉันคือเส้นขอบ) คุณเพียงแค่ปล่อยให้การประกาศสีเช่นborder-bottom-width: 1pxและborder-bottom-style: solidและ

สำหรับ multiline คุณสามารถพันข้อความ multiline ในช่วงภายในองค์ประกอบ เช่น<a href="#"><span>insert multiline texts here</span></a>จากนั้นเพิ่มborder-bottomและpaddingบน<span>- สาธิต

— chelmertz
แหล่งที่มา

3

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

— deweydb

@deweydb: วิธีการเพิ่ม padding-bottom ไปยัง div คอนเทนเนอร์ด้วยหรือไม่ jsfiddle.net/dYfjc/1

— chelmertz

+1 ฉันไม่รู้เกี่ยวกับการละทิ้งคุณสมบัติสีเพื่อสืบทอดสีของแบบอักษรซึ่งจะช่วยลดเหงื่อและน้ำตาได้มากในอนาคต!

— Larry

9

ฉันค่อนข้างไม่แน่ใจว่าทำไมคำตอบนี้มี upvotes มากมาย สิ่งนี้ใช้ไม่ได้กับตำราหลายบรรทัด

3

สำหรับ multiline คุณสามารถพันข้อความ multiline ในช่วงภายในองค์ประกอบ เช่นนั้นเพียงแค่เพิ่มขอบล่างและช่องว่างใน<a href="#"><span>insert multiline texts here</span></a> jsfiddle.net/Aishaterr/vrpb2ey7/1<span>

— Daniel Hernandez

133

อัปเดต 2019: CSS Working Group ได้เผยแพร่ร่างสำหรับการตกแต่งข้อความระดับ 4ซึ่งจะเพิ่มคุณสมบัติใหม่text-underline-offset(เช่นเดียวกับtext-decoration-thickness ) เพื่อให้สามารถควบคุมตำแหน่งที่แน่นอนของขีดเส้นใต้ได้ จากการเขียนนี้มันเป็นร่างขั้นต้นและยังไม่ได้ใช้งานโดยเบราว์เซอร์ใด ๆ แต่ดูเหมือนว่าในที่สุดมันจะทำให้เทคนิคด้านล่างล้าสมัย

คำตอบเดิมด้านล่าง

ปัญหาของการใช้border-bottomโดยตรงก็คือแม้ว่าpadding-bottom: 0ขีดเส้นใต้นั้นจะอยู่ห่างจากตัวอักษรมากเกินไป ดังนั้นเราจึงยังไม่สามารถควบคุมได้อย่างสมบูรณ์

ทางออกหนึ่งที่ให้ความแม่นยำของพิกเซลแก่คุณคือการใช้:afterองค์ประกอบหลอก:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

โดยการเปลี่ยน bottomคุณสมบัติ (ตัวเลขติดลบถือว่าใช้ได้) คุณสามารถวางเครื่องหมายขีดเส้นใต้ได้ตามที่คุณต้องการ

ปัญหาอย่างหนึ่งของเทคนิคนี้ที่ต้องระวังคือมันมีพฤติกรรมแปลก ๆ กับการพันบรรทัด

— ลูกคนสุดท้อง
แหล่งที่มา

2

สิ่งนี้ใช้ไม่ได้กับปัญหาเฉพาะของฉัน แต่นี่เป็นกลอุบายที่ยอดเยี่ยม +1

11

ทำงานได้ดี แต่จะไม่ทำงานกับจุดยึดที่มีหลายบรรทัด

— Willster

@ last-child อันนี้ดีกว่าขีดเส้นใต้ แต่ด้วยการห่อข้อความสิ่งนี้จะไม่สามารถใช้ได้กับทุกบรรทัด

— Nishantha

ปัญหาหนึ่งคือขอบล่างและขีดเส้นใต้เป็นสองสิ่งที่แตกต่างกัน ตัวอย่างเช่นควรเป็นส่วนหนึ่งของข้อความที่ขยายด้านล่างขีดเส้นใต้ หากคุณใช้สไตล์แท็กเป็นปุ่มคุณจะไม่มีอิสระในการใช้เส้นขอบด้านล่างเป็นการขีดเส้นใต้

— Anders Lindén

10

ลองนึกภาพว่ามีคนบอกใครที่ยังใหม่กับการพัฒนาเว็บไซต์นักออกแบบกราฟิกผู้ใช้ทั่วไปหรือแม่ของคุณว่านี่คือสิ่งที่ต้องเพิ่มพื้นที่ควบคุมระหว่างข้อความและขีดเส้นใต้และพวกเขาจะสงสัยว่าคุณกำลังทำอะไรกับชีวิตของคุณ .

— MarcGuay

79

คุณสามารถใช้สิ่งนี้ text-underline-position: under

ดูที่นี่สำหรับรายละเอียดเพิ่มเติม: https://css-tricks.com/almanac/properties/t/text-underline-position/

ดูยังเข้ากันได้ของเบราว์เซอร์

— Duc Huynh
แหล่งที่มา

2

ขอบคุณ! หากคุณพยายามขีดเส้นใต้ประและเห็นว่ามันถูกวาดโดยไม่มีช่องว่างระหว่างด้านล่างของข้อความและบรรทัดนี่จะช่วยแก้ไขปัญหาได้

— Jonathan Cross

6

นี่คือคำตอบที่ถูกต้องสำหรับเบราว์เซอร์ที่ทันสมัยโดยไม่มีวิธีแก้ปัญหาใด ๆ

— Paras Shah

2

มันไม่ทำงานใน Firefox ไม่ได้กับผู้ขายคำนำหน้า - แต่มันอยู่ในสเป็คของ W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property แหล่งข้อมูลที่เกี่ยวข้องอื่น ๆ : quackit.com/css/css3/properties/css_text-underline-position.cfm

— rosell.dk

4

ณ ขณะนี้สิ่งนี้ใช้ได้เฉพาะในเบราว์เซอร์ chrome เท่านั้นและไม่ใช่วิธีแก้ปัญหาสำหรับเบราว์เซอร์อื่น

— miir

2

ดี ณ วันที่ความคิดเห็นนี้ฉันเห็นงานนี้ใน Firefoxเช่นกัน

— Jarad

15

นี่คือสิ่งที่ทำงานได้ดีสำหรับฉัน

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>

ขยายตัวอย่างข้อมูล

— Jordan Starrk
แหล่งที่มา

2

เป็นสิ่งสำคัญที่จะต้องทราบtext-underline-positionว่าไม่ได้รับการสนับสนุนภายใต้ Firefox ตามdeveloper.mozilla.org/en-US/docs/Web/CSS/

— ......

น่าสนใจมาก. คำบรรยายภาพยอดเยี่ยม ขอบคุณ!

— Jordan Starrk

สนับสนุนใน Firefox เริ่มต้นจาก 74 ตามลิงค์เดียวกัน

— GSerg

11

การเข้าไปดูรายละเอียดของสไตล์การมองเห็นของtext-decoration:underlineมันไร้ประโยชน์มากดังนั้นคุณจะต้องไปกับการแฮ็กเอาบางชนิดออกtext-decoration:underlineและแทนที่มันด้วยอย่างอื่นจนกว่า CSS ในอนาคตอันแสนไกลในอนาคตอันไกลจะช่วยให้เราควบคุมได้มากขึ้น .

สิ่งนี้ใช้ได้กับฉัน:

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>

ขยายตัวอย่างข้อมูล

ปรับค่า% (81% และ 85%) เพื่อเปลี่ยนระยะห่างของบรรทัดจากข้อความ
ปรับความแตกต่างระหว่างค่าสอง% เพื่อเปลี่ยนความหนาของเส้น
ปรับค่าสี (# 222222) เพื่อเปลี่ยนสีขีดเส้นใต้
ทำงานร่วมกับองค์ประกอบอินไลน์หลายบรรทัด
ทำงานกับพื้นหลังใด ๆ

นี่คือรุ่นที่มีคุณสมบัติที่เป็นกรรมสิทธิ์ทั้งหมดสำหรับความเข้ากันได้บางอย่าง:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

อัปเดต: รุ่น SASSY

ฉันทำมิกซ์ scss สำหรับสิ่งนี้ หากคุณไม่ได้ใช้ SASS เวอร์ชันปกติด้านบนยังคงใช้งานได้ดี ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

จากนั้นใช้งานได้ตามต้องการ:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

อัปเดต 2: เคล็ดลับ Descenders

หากคุณมีสีพื้นหลังที่เป็นของแข็งลองเพิ่มสีที่บางtext-strokeหรือtext-shadowเป็นสีเดียวกับพื้นหลังของคุณเพื่อให้ตัวแปลงสัญญาณดูดี

เครดิต

นี่เป็นเวอร์ชันที่เรียบง่ายของเทคนิคที่ฉันพบในตอนแรกที่https://eager.io/app/smartunderlineแต่บทความได้ถูกลบออกไปแล้ว

— squarecandy
แหล่งที่มา

น่าเสียดายที่ลิงก์ eager.io ใช้งานไม่ได้อีกต่อไป คุณจำได้ไหมว่าอะไรคือการแฮ็คเพื่อทำให้ผู้สืบทอดดูดีขึ้น?

— kano

1

@Kano - ฉันเชื่อว่ามันใช้ text-shadow ในสีเดียวกับพื้นหลังที่เป็นของแข็ง

— squarecandy

นอกจากนี้ด้วยเทคนิคด้านบนคุณสามารถตั้งค่าสีของขีดเส้นใต้ที่แตกต่างจากข้อความได้ดังนั้นบางครั้งฉันตั้งให้เบากว่าข้อความซึ่งทำให้การชนกับส่วนล่างมีปัญหาน้อยกว่า

— squarecandy

7

ฉันรู้ว่ามันเป็นคำถามเก่า แต่สำหรับการตั้งค่าข้อความบรรทัดเดียวdisplay: inline-blockแล้วการตั้งค่าheightได้ผลดีสำหรับฉันเพื่อควบคุมระยะห่างระหว่างเส้นขอบและข้อความ

— โดมินิคพี
แหล่งที่มา

1

ฉันไม่จำเป็นต้องตั้งความสูง ฉันเพิ่งใส่มันใน div อื่นและเมื่อฉันต้องการให้มันอยู่กึ่งกลางฉันเพิ่งตั้ง text-align บน div ออก

— Guy Lowe

6

@ คำตอบสุดท้ายของเด็กคือคำตอบที่ยอดเยี่ยม!

อย่างไรก็ตามการเพิ่มเส้นขอบให้ H2 ของฉันสร้างขีดเส้นใต้ยาวกว่าข้อความ

หากคุณกำลังเขียน CSS ของคุณแบบไดนามิกหรือถ้าชอบฉันคุณโชคดีและรู้ว่าข้อความจะเป็นเช่นไรคุณสามารถทำสิ่งต่อไปนี้:

เปลี่ยนcontentสิ่งที่มีความยาวที่ถูกต้อง (เช่นเดียวกัน
ข้อความ) ตั้งค่าสีฟอนต์เป็นtransparent(หรือrgba(0,0,0,0))

เป็นขีดเส้นใต้<h2>Processing</h2>(ตัวอย่าง) ให้เปลี่ยนรหัสลูกสุดท้ายเป็น:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

— Michael Greisman
แหล่งที่มา

9

H2s เป็นองค์ประกอบบล็อกซึ่งอาจอธิบายได้ว่าทำไมขีดเส้นใต้ยาวกว่าข้อความ อาจdisplay: inline-blockจะแก้ไขได้ การแทนที่ข้อความด้วยcontentดูเหมือนว่าแฮ็คที่สามารถทำลายได้หลายวิธี

— ลูกคนสุดท้าย

3

ดูของฉันไวโอลิน

คุณจะต้องใช้คุณสมบัติความกว้างเส้นขอบและคุณสมบัติการขยาย ฉันได้เพิ่มอนิเมชั่นบางอย่างเพื่อให้ดูเท่กว่าเดิม:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

ขยายตัวอย่างข้อมูล

— ละอองดาว
แหล่งที่มา

2

อีกทางเลือกหนึ่งสำหรับข้อความหรือลิงก์หลายบรรทัดคุณสามารถใส่ข้อความของคุณลงในช่วงในองค์ประกอบบล็อก

<a href="#">
    <span>insert multiline texts here</span>
</a>

<span>แล้วคุณก็สามารถเพิ่มขอบล่างและช่องว่างใน

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

คุณอาจอ้างถึงซอนี้ https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
แหล่งที่มา

2

ถ้าคุณต้องการ:

หลาย
ด่างดวง
พร้อมช่องว่างด้านล่างที่กำหนดเอง
โดยไม่ต้องห่อ

ขีดเส้นใต้คุณสามารถใช้ภาพพื้นหลังความสูง 1 พิกเซลพร้อมตำแหน่งrepeat-xและ100% 100%:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

คุณสามารถแทนที่วินาที100%ด้วยสิ่งอื่นเช่นpxหรือemเพื่อปรับตำแหน่งแนวตั้งของขีดเส้นใต้ นอกจากนี้คุณสามารถใช้calcหากคุณต้องการเพิ่มช่องว่างภายในแนวตั้งเช่น:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

แน่นอนคุณยังสามารถสร้างรูปแบบ png base64 ของคุณเองด้วยสีความสูงและการออกแบบอื่น ๆ เช่นที่นี่: http://www.patternify.com/ - ตั้งค่าความกว้างและความสูงของสี่เหลี่ยมจัตุรัสที่ 2x1

แหล่งที่มาของแรงบันดาลใจ: http://alistapart.com/article/customunderlines

— mcmimik
แหล่งที่มา

1

หากคุณกำลังใช้text-decoration: underline;งานคุณสามารถเพิ่มช่องว่างระหว่างขีดเส้นใต้และข้อความโดยใช้text-underline-position: under;

สำหรับคุณสมบัติข้อความตำแหน่งขีดเส้นใต้คุณสามารถดูได้ที่นี่

— Ifrah
แหล่งที่มา

0

ฉันสามารถทำได้โดยใช้ U (ขีดเส้นใต้แท็ก)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

— อรุณ ประสาทส.ส.
แหล่งที่มา

0

นี่คือสิ่งที่ฉันใช้:

HTML:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

CSS:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

— คอนสแตนติโน่คอนสแตนติโน
แหล่งที่มา

0

สิ่งที่ฉันใช้:

<span style="border-bottom: 1px solid black"> Enter text here </span>

— Francis Acosta
แหล่งที่มา