คำถามติดแท็ก css-content

คุณจะใช้คุณสมบัติCSS contentเพื่อเพิ่มเอนทิตีHTML ได้อย่างไร การใช้บางสิ่งเช่นนี้เพียงพิมพ์ ไปที่หน้าจอแทนที่จะเป็นพื้นที่ไม่แตกหัก: .breadcrumbs a:before { content: ' '; }

1013 html  css  html-entities  css-content 

ฉันกำลังพยายามใช้:afterองค์ประกอบหลอก CSS บนinputเขตข้อมูล แต่มันไม่ทำงาน ถ้าฉันใช้กับ a spanมันใช้งานได้ดี <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> ใช้งานได้ (ทำให้ยิ้มหลังจาก "buu!" และก่อน "เพิ่มเติม") <span class="mystyle">buuu!</span>a some more สิ่งนี้ใช้ไม่ได้ - มีเพียงบางสีเท่านั้นค่าสีแดง แต่ไม่มีรอยยิ้ม <input class="mystyle" type="text" value="someValue"> ผมทำอะไรผิดหรือเปล่า? ฉันควรใช้ตัวเลือกหลอกอื่น หมายเหตุ: ฉันไม่สามารถเพิ่มสิ่งspanรอบตัวของฉันinputเพราะมันถูกสร้างขึ้นโดยการควบคุมของบุคคลที่สาม

686 html  css  pseudo-element  css-content 

เพียงแค่สงสัยว่ามันเป็นไปได้ที่จะทำให้ CSS contentใส่รหัส html แทน string บน:beforeหรือ:afterองค์ประกอบเช่น: .header:before{ content: '<a href="#top">Back</a>'; } สิ่งนี้จะมีประโยชน์มาก ... สามารถทำได้ผ่าน Javascript แต่การใช้ css สำหรับสิ่งนี้จะทำให้ชีวิตง่ายขึ้นจริงๆ :)

246 html  css  pseudo-element  css-content 

รหัสต่อไปนี้ใช้ไม่ได้: p:before { content: " "; } p:before { content: " "; } ฉันจะเพิ่มช่องว่างก่อนเนื้อหาขององค์ประกอบได้อย่างไร หมายเหตุ: ฉันต้องการสีขอบซ้ายและขอบซ้ายสำหรับการใช้ความหมายและใช้ช่องว่างเป็นขอบที่ไม่มีสี :)

118 css  unicode  space  css-content 

เป็นไปได้ไหมที่จะมีหลาย:beforeหลอกสำหรับองค์ประกอบเดียวกัน? .circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; } ฉันพยายามใช้สไตล์ข้างต้นกับองค์ประกอบเดียวกันโดยใช้ jQuery แต่จะใช้เฉพาะรูปแบบล่าสุดเท่านั้นไม่เคยใช้ทั้งสองแบบ

116 css  css-selectors  pseudo-element  css-content 

ฉันสงสัยว่าทำไมเบราว์เซอร์จึงแสดงเครื่องหมายคำพูดเปิดคู่สำหรับองค์ประกอบแรกเท่านั้น องค์ประกอบที่สองมีเครื่องหมายคำพูดเดี่ยวแทน a::before { content: open-quote; } <a href="http://www.google.com">Google</a> <br> <a href="http://www.amazon.com">Amazon</a> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด

89 html  css  pseudo-element  css-content