คำถามติดแท็ก pseudo-element

มีวิธีการเลือก / จัดการองค์ประกอบหลอก CSS เช่น::beforeและ::after(และรุ่นเก่าที่มีเซมิโคลอนหนึ่งอัน) โดยใช้ jQuery หรือไม่? ตัวอย่างเช่นสไตล์ชีทของฉันมีกฎต่อไปนี้: .span::after{ content:'foo' } ฉันจะเปลี่ยน 'foo' เป็น 'bar' โดยใช้ jQuery ได้อย่างไร

943 javascript  jquery  css  jquery-selectors  pseudo-element 

ฉันกำลังพยายามใช้: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 

ฉันมีรายการองค์ประกอบซึ่งมีสไตล์ดังนี้: ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; } <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล เอาท์พุทOne | Two | Three | Four | Five |แทนOne | Two | Three | Four | Five ใครรู้วิธีการเลือก CSS ทั้งหมดยกเว้นองค์ประกอบสุดท้าย? คุณสามารถดูคำจำกัดความของ:not()ตัวเลือกได้ที่นี่

369 css  css-selectors  pseudo-element 

วิธีการเขียน:hoverและ:visitedเงื่อนไขสำหรับa:before? ฉันพยายามa:before:hoverแต่มันไม่ทำงาน

347 css  css-selectors  pseudo-element  pseudo-class 

สมมติว่าฉันต้องการตกแต่งลิงก์ไปยังไฟล์บางประเภทโดยใช้รูปภาพ ฉันสามารถประกาศลิงก์ของฉันเป็น <a href='foo.pdf' class='pdflink'>A File!</a> จากนั้นมี CSS เช่น .pdflink:after { content: url('/images/pdf.png') } ตอนนี้ใช้งานได้ดียกเว้นในกรณีpdf.pngที่ขนาดลิงก์ของฉันไม่เหมาะสม ฉันต้องการบอกเบราว์เซอร์ให้ปรับขนาด:afterรูปภาพ แต่ฉันไม่สามารถหาไวยากรณ์ที่ถูกต้องสำหรับชีวิตของฉัน หรือว่าเป็นภาพพื้นหลังที่ไม่สามารถปรับขนาดได้ การทางพิเศษแห่งประเทศไทย: ฉันกำลังโน้มตัวไปข้างหน้าก) การปรับขนาดภาพต้นฉบับให้เป็นขนาด "ถูกต้อง" ฝั่งเซิร์ฟเวอร์และ / หรือ b) การเปลี่ยนมาร์กอัปเพื่อส่งแท็ก IMG แบบอินไลน์ ฉันพยายามหลีกเลี่ยงทั้งสองสิ่ง แต่ดูเหมือนพวกเขาจะเข้ากันได้ดีกว่าการพยายามทำสิ่งต่าง ๆ ด้วย CSS เท่านั้น คำตอบสำหรับคำถามเดิมของฉันดูเหมือนจะเป็น "คุณสามารถเรียงลำดับของการทำมันบางครั้ง"

251 css  pseudo-element 

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

246 html  css  pseudo-element  css-content 

ฉันต้องการใช้สวิตช์สำหรับเลย์เอาต์ของแท็กวรรคบนหน้าเว็บ ฉันใช้ pseudoelement หลัง: p:after {content: url("../img/paragraph.gif");} ตอนนี้ฉันต้องลบรหัส CSS นี้ออกจากหน้า สิ่งนี้สามารถทำได้อย่างง่ายดาย? ฉันต้องการเพิ่ม: jQuery มีการใช้งานบนหน้านี้แล้ว และฉันไม่ต้องการรวมหรือลบไฟล์ที่มี CSS

236 javascript  html  css  pseudo-element 

ฉันต้องการรวม:afterกับ:hoverใน CSS (หรือตัวเลือกหลอกอื่น ๆ ) ฉันเป็นพื้นมีรายชื่อและรายการที่มีระดับมีรูปร่างลูกศรประยุกต์ใช้selected :afterฉันต้องการเหมือนกันที่จะเป็นจริงสำหรับวัตถุที่ถูกโฉบไป แต่ไม่สามารถทำให้มันทำงานได้ นี่คือรหัส #alertlist { list-style:none; width: 250px; } #alertlist li { padding: 5px 10px; border-bottom: 1px solid #e9e9e9; position:relative; } #alertlist li.selected, #alertlist li:hover { color: #f0f0f0; background-color: #303030; } #alertlist li.selected:after { position:absolute; top: 0; right:-10px; bottom:0; border-top: 10px solid transparent; border-bottom: …

176 css  css-selectors  pseudo-element 

ต่อไปเพื่อให้การหมุนทำงานในหลอก content:"\24B6"? ฉันพยายามหมุนสัญลักษณ์ยูนิโค้ด

159 css  rotation  pseudo-element 

ฉันสร้างลายเซ็นอีเมล HTML ด้วย CSS แบบอินไลน์ (เช่น CSS ในstyleคุณลักษณะ) และฉันอยากรู้ว่ามันเป็นไปได้ที่จะใช้:beforeและ:afterองค์ประกอบหลอก ถ้าเป็นเช่นนั้นฉันจะใช้สิ่งนี้กับอินไลน์ CSS ได้อย่างไร td { text-align: justify; } td:after { content: ""; display: inline-block; width: 100%; }

141 html  css  css-selectors  pseudo-element  inline-styles 

มีความแตกต่างในการทำงานระหว่าง CSS 2.1 :afterและ::afterตัวเลือกหลอกCSS 3 หรือไม่(นอกเหนือจาก::afterไม่รองรับในเบราว์เซอร์รุ่นเก่า) มีเหตุผลในทางปฏิบัติที่จะใช้ข้อกำหนดใหม่กว่านี้หรือไม่?

134 css  css-selectors  pseudo-element  pseudo-class 

ฉันมีคลาส CSS Modalที่อยู่ในตำแหน่งที่แน่นอนดัชนี z อยู่เหนือระดับแม่และอยู่ในตำแหน่งที่ดีกับ JQuery ฉันต้องการเพิ่มรูปคาเร็ต (^) ที่ด้านบนของกล่องโมดอลและกำลังดูการใช้:beforeตัวเลือกหลอก CSS เพื่อทำสิ่งนี้อย่างหมดจด รูปภาพจะต้องอยู่ในตำแหน่งที่แน่นอนและดัชนี z เหนือโมดอล แต่ฉันไม่พบวิธีใดในการเพิ่มคลาสที่เหมาะสมให้กับรูปภาพในcontentแอตทริบิวต์: .Modal:before{ content:url('blackCarrot.png') /* with class ModalCarrot ??*/ } .ModalCarrot{ position:absolute; left:50%; margin-left:-8px; top:-16px; } ตัวเลือกที่สองที่ดีที่สุด - ฉันสามารถเพิ่มสไตล์อินไลน์ในแอตทริบิวต์เนื้อหาได้หรือไม่

116 css  modal-dialog  pseudo-element 

เป็นไปได้ไหมที่จะมีหลาย: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 

เนื่องจาก IE7 และ IE8 ไม่รองรับสัญกรณ์ double-colon สำหรับองค์ประกอบหลอก (เช่น::afterหรือ::first-letter) และเนื่องจากเบราว์เซอร์รุ่นใหม่รองรับสัญกรณ์ single-colon (เช่น:after) เพื่อความเข้ากันได้แบบย้อนกลับฉันควรใช้สัญกรณ์ single-colon แต่เพียงผู้เดียวและเมื่อ ส่วนแบ่งการตลาดของ IE8 ลดลงสู่ระดับเล็กน้อยย้อนกลับไปและค้นหา / แทนที่ในฐานรหัสของฉัน? หรือฉันควรใส่ทั้งสองอย่าง: .foo:after, .foo::after { /*styles*/ } การใช้ double alone นั้นดูไร้สาระถ้าฉันสนใจผู้ใช้ IE8 (ผู้น่าสงสาร)

108 css  internet-explorer-8  css-selectors  internet-explorer-7  pseudo-element 

ฉันมีปัญหาในการทำความเข้าใจพฤติกรรมของ:afterคุณสมบัติCSS ตามข้อกำหนด ( ที่นี่และที่นี่ ): ตามที่ระบุชื่อองค์ประกอบ:beforeและ:afterหลอกระบุตำแหน่งของเนื้อหาก่อนและหลังเนื้อหาโครงสร้างเอกสารขององค์ประกอบ ดูเหมือนว่าจะไม่มีข้อ จำกัด ว่าองค์ประกอบใดสามารถมีคุณสมบัติ:after(หรือ:before) ได้ แต่ก็ดูเหมือนว่าจะทำงานเฉพาะกับองค์ประกอบเฉพาะ ... <p>งาน<img>ไม่ได้<input>ไม่ได้<table>ไม่ ฉันสามารถทดสอบเพิ่มเติมได้ แต่ประเด็นคือ โปรดทราบว่าสิ่งนี้ค่อนข้างสอดคล้องกันในเบราว์เซอร์ อะไรเป็นตัวกำหนดว่าวัตถุสามารถรับ a :beforeและ:afterคุณสมบัติได้หรือไม่?

100 css  pseudo-element