ลบขีดเส้นใต้ปากแข็งออกจากลิงก์

542

ฉันพยายามที่จะให้ลิงค์ปรากฏเป็นสีขาวโดยไม่มีขีดเส้นใต้ สีข้อความแสดงขึ้นอย่างถูกต้องเป็นสีขาว แต่ขีดเส้นใต้สีน้ำเงินยังคงอยู่อย่างถาวร ฉันพยายามtext-decoration: none;และtext-decoration: none !important;CSS เพื่อลบการเชื่อมโยงขีดเส้นใต้ ไม่ทำงาน

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

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

ฉันจะลบเส้นใต้สีน้ำเงินออกจากลิงค์ได้อย่างไร

css hyperlink underline

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

1

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

— Davor Lucic

การตกแต่งข้อความอยู่ที่ไหน: ไม่มีใครถูกใช้?

— shuttle87

771

ตามที่คาดไว้คุณไม่ได้ใช้text-decoration: none;กับ anchor ( .boxhead a) แต่ใช้กับ element span (.boxhead )

ลองสิ่งนี้:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

— Davor Lucic
แหล่งที่มา

12

แต่ถ้าคุณมีข้อความล้อมรอบสแปนเช่นกันและคุณต้องการให้ข้อความที่อยู่รอบ ๆ มีลิงก์ขีดเส้นใต้ แต่ข้อความภายในช่วงนั้นไม่มีเลย

— JMTyler

4

@rebus คุณไม่สามารถ? ทำไมจะไม่ล่ะ? ทำให้อย่างน้อย IE7 + และ FireFox 4+ คุณทำได้ แต่ไม่ใช่ใน Chrome ด้วยเหตุผลบางประการ นี่คือรหัสที่ฉันต้องทำงานในเบราว์เซอร์ที่ไม่ใช่ Chrome ที่ฉันทดสอบ: .toc-list a > span{text-decoration:none !important;} ฉันคิดว่าคำถามของ @ JMTyler นั้นถูกกฎหมาย ฉันกำลังค้นหาวิธีแก้ไขปัญหาเดียวกัน

— Tony Topper

7

ดูเหมือนว่าtext-decorationไม่รองรับการแทนที่แท็กที่ซ้อนกันดังที่ได้กล่าวไว้ข้างต้น เมื่อคุณมีa { text-decoration: underline; }กฎที่ใช้คุณไม่สามารถa .wish_this_were_not_underlined { text-decoration: none; } de-ใช้มันเช่นกับ ฉันไม่พบการอ้างอิงสำหรับสิ่งนี้ แต่นั่นคือประสบการณ์ของฉัน (ใน Chrome)

— เมฆบางส่วน

2

เหมือนคนอื่น ๆ ข้างต้นผมไม่สามารถที่จะยกเลิกการขีดเส้นใต้ข้อความโดยการใช้เพื่อแทนเราเลือกที่จะซ่อนสายโดยใช้text-decoration: none; text-decoration: underline; text-decoration-color: white;/ hack

— Ryan Burbidge

1

หากคุณพยายามลบขีดเส้นใต้ออกจากองค์ประกอบภายในจุดยึดไม่ใช่จุดยึดทั้งหมด คุณจำเป็นต้องทำให้องค์ประกอบภายในเป็นแบบอินไลน์บล็อกเช่นนั้น:.boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— Patrick Patrick Denny

213

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

ตัวอย่างเช่น:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

ดูW3.orgสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการกระทำของผู้ใช้ pseudo-classes: โฮเวอร์,: แอ็คทีฟและ: โฟกัส

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

5

ฉันคิดว่าคุณหมายถึงa:linkเมื่อคุณพูดa:click

— artlung

6

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

— Doresoom

33

text-decoration: none !importantควรลบออก .. คุณแน่ใจหรือว่าไม่มีที่border-bottom: 1px solidซุ่มซ่อนอยู่เกี่ยวกับเรื่องนี้? (ติดตามลักษณะที่คำนวณใน Firebug / F12 ใน IE)

— อเล็กซ์เค
แหล่งที่มา

4

การตั้งค่าborder-bottom-style: none;คงที่สำหรับฉัน

— Helder S Ribeiro

27

เพียงเพิ่มคุณสมบัตินี้ไปยังแท็กสมอ

style="text-decoration:none;"

ตัวอย่าง:

<a href="page.html"  style="text-decoration:none;"></a>

หรือใช้วิธี CSS

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

— Nagarajan SR
แหล่งที่มา

16

บางครั้งสิ่งที่คุณเห็นเป็นเงากล่องไม่ใช่ขีดเส้นใต้ข้อความ

ลองใช้ (ใช้ตัวเลือก CSS ที่เหมาะสมกับคุณ):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

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

1

สิ่งนี้ควรเป็นคำตอบ .. บางครั้งเงาของกล่องให้ขีดเส้นใต้ส่งผลกระทบ

— Bhargav

มันเป็นคำตอบ แต่ไม่ใช่คำตอบที่ดีที่สุด ขอบเขตของมันเป็นแบบโกลบอลและไม่เจาะจง สิ่งนี้ควรทำเคล็ดลับ: .otherPage a:link {text-decoration:none;}; ทำซ้ำสำหรับการเข้าชมใช้งานและโฮเวอร์ถ้าจำเป็น

— Ajowi

14

คุณพลาด text-decoration:noneสำหรับแท็กสมอ ดังนั้นรหัสควรจะติดตาม

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

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

คุณสมบัติมาตรฐานเพิ่มเติมสำหรับการตกแต่งข้อความ

— Santosh Khalse
แหล่งที่มา

9

ยากที่จะคาดเดา

แต่ฟังดูแล้วเหมือนกับว่าคุณอาจborder-bottom: 1px solid blue;ถูกนำไปใช้ border: none;บางทีอาจจะเพิ่มtext-decoration: none !importantถูกต้องเป็นไปได้ว่าคุณมีสไตล์อื่นที่ยังคงแทนที่ CSS นั้นอยู่ดี

นี่คือที่ที่ใช้Firefox Web Developer Toolbar ยอดเยี่ยมคุณสามารถแก้ไข CSS ที่นั่นและดูว่าสิ่งต่าง ๆ ใช้งานได้อย่างน้อยสำหรับ Firefox หรือไม่ CSS > Edit CSSมันอยู่ภายใต้

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

9

ตามกฎแล้วหาก "ขีดเส้นใต้" ของคุณไม่ได้เป็นสีเดียวกับข้อความของคุณ [และ 'สี:' ไม่ได้ถูกแทนที่ด้วยอินไลน์] มันไม่ได้มาจาก "การตกแต่งด้วยข้อความ:" ต้องเป็น "เส้นขอบล่าง:"

อย่าลืมปิดกั้นการเรียนเทียมของคุณด้วย!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

ตัวอย่างนี้ถือว่าอยู่ในสมอเปลี่ยนเป็นเสื้อคลุมตาม ... และใช้ความเฉพาะเจาะจงแทน "! สำคัญ" หลังจากที่คุณติดตามสาเหตุที่แท้จริง

— Joel Crawford-Smith
แหล่งที่มา

4

ในขณะที่คำตอบอื่น ๆ นั้นถูกต้องมีวิธีที่ง่ายในการกำจัดขีดเส้นใต้ในลิงก์ที่น่ารำคาญเหล่านั้นทั้งหมด:

a {
   text-decoration:none;
}

การทำเช่นนี้จะลบขีดเส้นใต้ออกจากลิงก์ทุกเดียวในหน้าของคุณ!

— yarz เทคโนโลยี
แหล่งที่มา

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

— Asuquo12

2

หากtext-decoration: noneหรือborder: 0ไม่ได้ผลลองใช้สไตล์แบบอินไลน์ใน html ของคุณ

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

1

เพียงแค่ใช้คุณสมบัติ

border:0;

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

— MK Sandhu
แหล่งที่มา

1

ไม่มีคำตอบใดที่เหมาะกับฉัน ในกรณีของฉันมีมาตรฐาน

a:-webkit-any-link {
text-decoration: underline;

ในรหัสของฉัน โดยทั่วไปไม่ว่าลิงก์จะเป็นอะไรสีของข้อความจะเป็นสีน้ำเงินและลิงก์จะยังคงอยู่ตามเดิม

ดังนั้นฉันจึงเพิ่มรหัสที่ส่วนท้ายของส่วนหัวเช่นนี้:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

และปัญหาจะไม่มีอีกต่อไป

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

1

  a {
    color: unset;
    text-decoration: unset;
  }

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

0

นี่คือตัวอย่างสำหรับตัวควบคุม LinkButton ของ asp.net webforms:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

รหัสที่อยู่เบื้องหลัง:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

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

0

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

คุณอาจใช้รหัสนี้

.boxhead h2 a{text-decoration: none;}

หรือ

.boxhead a{text-decoration: none !important;}

หรือ

a{text-decoration: none !important;}

— Md Abul Bashar
แหล่งที่มา

0

วางรหัส HTML ต่อไปนี้ไว้หน้า <BODY>แท็ก:

<STYLE>A {text-decoration: none;} </STYLE>

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

0

ในกรณีของฉันฉันมีรูปแบบ HTML ที่ไม่ดี ลิงก์อยู่ใน<u>แท็กไม่ใช่<ul>แท็ก

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

0

ตามที่คนอื่น ๆ ชี้ให้เห็นดูเหมือนว่าคุณไม่สามารถแทนที่สไตล์การตกแต่งข้อความที่ซ้อนกัน ... แต่คุณสามารถเปลี่ยนสีตกแต่งข้อความได้

ในฐานะที่เป็นแฮ็คฉันเปลี่ยนสีให้โปร่งใส:

ข้อความตกแต่งสี: โปร่งใส;

— เบน
แหล่งที่มา