จะลบเฉพาะขีดเส้นใต้จาก a: before?

98

ฉันมีชุดลิงก์สไตล์โดยใช้:beforeเพื่อใช้ลูกศร

มันดูดีในทุกเบราว์เซอร์ แต่เมื่อฉันใช้ขีดเส้นใต้กับลิงก์ฉันไม่ต้องการขีดเส้นใต้ใน:beforeส่วนนั้น (ลูกศร)

ดูตัวอย่าง jsfiddle: http://jsfiddle.net/r42e5/1/

เป็นไปได้ไหมที่จะลบสิ่งนี้ รูปแบบการทดสอบที่ฉัน#test p a:hover:beforeใช้จะถูกนำไปใช้ (ตาม Firebug) แต่ยังคงขีดเส้นใต้อยู่

วิธีใดที่จะหลีกเลี่ยงสิ่งนี้?

#test {
  color: #B2B2B2;
}

#test p a {
  color: #B2B2B2;
  text-decoration: none;
}

#test p a:hover {
  text-decoration: underline;
}

#test p a:before {
  color: #B2B2B2;
  content: "► ";
  text-decoration: none;
}

#test p a:hover:before {
  text-decoration: none;
}

<div id="test">
  <p><a href="#">A link</a></p>
  <p><a href="#">Another link</a></p>
</div>

ขยายข้อมูลโค้ด

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

เห็นได้ชัดว่าคุณต้องการรายชื่อ ... ใช้องค์ประกอบ UL แทนชุดค่าผสม DIV / P ด้วยรายการคุณจะได้รับสัญลักษณ์แสดงหัวข้อย่อย (หรือแผ่นดิสก์ ... ) ฟรี ...

— Šime Vidas

ทำไมไม่ใช้รายการกับสัญลักษณ์แสดงหัวข้อย่อยที่กำหนดเองแทนย่อหน้าในกรณีของคุณ? มิฉะนั้นให้ใช้ before-content กับ parent p ไม่ใช่เพื่อเชื่อมโยง

— YuS

เป็นไปได้ที่จะซ้ำกันของstackoverflow.com/questions/8536015/…

— Oriol

179

เป็นไปได้ไหมที่จะลบสิ่งนี้

ใช่หากคุณเปลี่ยนรูปแบบการแสดงขององค์ประกอบแบบอินไลน์จากdisplay:inline(ค่าเริ่มต้น) เป็นdisplay:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

เนื่องจากข้อกำหนด CSS ระบุว่า :

เมื่อระบุหรือแพร่กระจายไปยังองค์ประกอบแบบอินไลน์จะมีผลต่อกล่องทั้งหมดที่สร้างโดยองค์ประกอบนั้นและจะขยายไปยังกล่องระดับบล็อกในโฟลว์ใด ๆ ที่แยกอินไลน์ (ดูหัวข้อ 9.2.1.1) […] สำหรับองค์ประกอบอื่น ๆ ทั้งหมดจะแพร่กระจายไปยังลูกที่อยู่ในโฟลว์ โปรดทราบว่าการตกแต่งข้อความจะไม่แพร่กระจายไปลอยและแน่นอนลูกหลานในตำแหน่งหรือเนื้อหาของลูกหลานของอะตอมแบบอินไลน์ระดับเช่นบล็อกแบบอินไลน์และตารางแบบอินไลน์

(เน้นของฉัน)

การสาธิต: http://jsfiddle.net/r42e5/10/

_{ขอบคุณ @Oriol ที่ให้วิธีแก้ปัญหาที่แจ้งให้ฉันตรวจสอบข้อกำหนดและดูว่าวิธีแก้ปัญหานั้นถูกกฎหมาย}

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

2

คุณสามารถแทนที่นำไปใช้กับองค์ประกอบหลักที่มีtext-decoration:underline display:inline-blockดูตัวอย่าง: jsfiddle.net/aZdhN/1 จากนั้นปัญหาของผู้ถามสามารถแก้ไขได้ดังนี้stackoverflow.com/a/17347068/1529630

— Oriol

3

เท่าที่ฉันเห็นสิ่งนี้ใช้ไม่ได้ใน Internet Explorer (ทดสอบ 8-10) มีความคิดอย่างไรในการจัดการกับ IE?

— Linus Caldwell

ฉันพบโซลูชันที่ใช้งานได้ใน IE8-11 ด้วย: stackoverflow.com/a/21902566/1607968

— LeJared

53

มีข้อผิดพลาดใน IE8-11ดังนั้นการใช้display:inline-block;เพียงอย่างเดียวจะไม่ทำงานที่นั่น

ฉันพบวิธีแก้ปัญหาสำหรับข้อบกพร่องนี้โดยการตั้งค่าอย่างชัดเจนtext-decoration:underline;สำหรับ: before-content จากนั้นเขียนทับกฎนี้อีกครั้งด้วยtext-decoration:none;

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

ตัวอย่างการทำงานที่นี่: http://jsfiddle.net/95C2M/

อัปเดต: เนื่องจาก jsfiddle ไม่สามารถใช้งานกับ IE8 ได้อีกต่อไปเพียงแค่วางโค้ดสาธิตง่ายๆนี้ลงในไฟล์ html ในเครื่องและเปิดใน IE8:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>

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

มีกรณีที่IE8 ขีดเส้นใต้ของภาพที่เชื่อมโยงหลายมิติสามารถปิดได้จาก<img style="text-decoration:underline">ภายในเท่านั้น (และนี่คือกุญแจสำคัญ)<a style="padding:0; border:none;">

— Bob Stein

น่าเสียดายที่ jsfiddle ไม่สามารถตรวจสอบได้ใน IE8 เนื่องจาก jsfiddle ไม่ทำงานใน IE8

— user2867288

ขออภัยฉันไม่พบเครื่องมือแบ่งปันโค้ดออนไลน์ใด ๆ ที่ยังใช้งานได้กับ IE8 ฉันได้เพิ่มโค้ด snipped ให้กับคำตอบข้างต้นซึ่งคุณสามารถวางลงในไฟล์ html และเปิดในเครื่องใน IE8

— LeJared

ผ่านการทดสอบและรับรองบน IE9 เหตุการณ์ที่ไม่มีสองสถานะที่แตกต่างกัน

— saeraphin

มีลิงก์ที่มีไอคอนใน: ก่อนหน้านั้นไม่ควรขีดเส้นใต้ในสถานะพักจากนั้นขีดเส้นใต้ไว้ที่โฮเวอร์ แต่ไม่ใช่ไอคอน นี่คือสิ่งที่ฉันต้องทำเพื่อโน้มน้าวให้ IE ทำสิ่งนี้ให้ถูกต้อง: {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (ใช่จริงๆขีดเส้นใต้ก่อน แล้วเขียนทับด้วย none) a: hover {text-decration: underline} a: hover: before {text-decoration: none}

— Fake Haak

8

คุณสามารถทำได้โดยเพิ่มสิ่งต่อไปนี้ลงใน:beforeองค์ประกอบ:

display: inline-block;
white-space: pre-wrap;

เมื่อdisplay: inline-blockขีดเส้นใต้หายไป แต่แล้วปัญหาก็คือช่องว่างหลังสามเหลี่ยมยุบและไม่แสดง ในการแก้ไขคุณสามารถใช้white-space: pre-wrapหรือwhite-space: pre.

การสาธิต : http://jsfiddle.net/r42e5/9/

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

1

+1 สำหรับpre-wrapคำใบ้ ฉันใช้content:'►\a0'(\ a0 = & nbsp;)

— Hashbrown

1

ตัดลิงก์ของคุณเป็นช่วงและเพิ่มการตกแต่งข้อความลงในช่วงบน a: วางเมาส์แบบนี้

a:hover span {
   text-decoration:underline;
}

ฉันได้อัปเดตซอของคุณเป็นสิ่งที่ฉันคิดว่าคุณกำลังพยายามทำ http://jsfiddle.net/r42e5/4/

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

ความคิดที่ดี. นั่นเป็นวิธีที่ฉันทำมาก่อน ปัญหาคือลิงค์นี้สร้างขึ้นในระบบ cms และลูกค้าของเรากรอกข้อมูลนี้เป็น Rich-text ด้วยตัวเอง

— OptimusCrime

CMS คือภาษาอะไร? สามารถทำให้มันพ่นลิงค์ออกแล้วห่อเป็นช่วงก่อนส่งไปยังเบราว์เซอร์ได้ไหม

— Udders

บริษัท กำลังใช้ modx ฉันเดาว่าฉันสามารถทำได้เป็นวิธีสุดท้าย แต่ฉันอยากจะทำให้มันเป็นโมฆะจริงๆ เดาว่าเป็นไปไม่ได้ ขอบคุณอย่างไรก็ตาม

— OptimusCrime

-1

ลองใช้แทน:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

จะทำอย่างไร

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

ฉันมีย่อหน้าใน div ของฉันดังนั้นมันจะไม่ได้ผล เป็นความคิดที่ดี

— OptimusCrime

น่าสนใจว่าใครใส่ -1 ถ้าคำตอบที่ยอมรับแสดงว่าเหมือนกัน แต่อยู่ในรูปแบบที่แตกต่างกัน ...

— Elen

-4

ใช้สิ่งนี้

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— บิพินจันทราไตรพาธี
แหล่งที่มา

ไม่ทำอะไรเลย การตกแต่งข้อความจะถูกละเว้น

— OptimusCrime