css: sau khi nội dung không nhấn mạnh

Question

Để tách các liên kết trong menu tôi đã thiết lập sau

#menu-main li a:after{ 
    content: " * "; 
} 

Các mục hiện hành được thêm

text-decoration: underline; 

vấn đề của tôi bây giờ là, rằng "*" là cũng được gạch chân, nhưng không nên

Tôi đã cố gắng thêm

#menu-main li a:after{ 
    text-decoration: none !important; 
} 

nhưng không có hiệu lực

Có ai có ý tưởng làm cách nào để giữ cho văn bản được gạch chân chứ không phải nội dung: sau nội dung?

Answer 1

Trong luồng thông thường, phần tử giả mở rộng kích thước của phần tử và những gì bạn thấy là gạch dưới của gạch dưới của chính liên kết. Thêm a:after {text-decoration: line-through;} để xác minh.

Dưới đây là một giải pháp đề xuất: http://jsfiddle.net/Ronny/Smr38/

Về cơ bản, khi sử dụng position: absolute cho pseudo-yếu tố họ không còn ảnh hưởng đến kích thước của các yếu tố cha mẹ của họ, do đó gạch dưới được cắt ở đúng nơi. Bạn vẫn cần phải chăm sóc những thứ như các sự kiện con trỏ, trạng thái di chuột và các vòng lấy nét, nhưng tôi để lại ít nhất thứ hai để bạn tìm ra.

Answer 2

nếu bạn đang kiểm soát đánh dấu, bạn có thể chèn một khoảng trong liên kết của bạn

<a href="..."><span>your link</span></a> 

và sử dụng css này

a { text-decoration: none } 
a span { text-decoration: underline } 

làm như vậy, nội dung tiêm vào won :after pseudoelement Không được gạch chân

nếu không, bạn có thể áp dụng kiểu cho li:after (nếu có thể) như vậy

#menu-main li:after{ 
    content: " * "; 
} 

Answer 3

Đó là câu hỏi cũ, nhưng đó là những gì bạn tìm thấy bằng Google nên tôi nghĩ tôi sẽ chia sẻ giải pháp của mình khi bạn cần phần tử giả đóng góp vào kích thước của "bố mẹ" và vị trí tuyệt đối không phải là một tùy chọn một số lý do:

#menu-main li a:after{ 
    content: " * "; 
    display:inline-block; /* So we can set a width */ 
    width: 0; 
    margin-left: 10px; /* "Size" of the Pseudo-element */ 
} 

Vì chiều rộng bằng 0, nó không hiển thị text-decoration. Điều này cũng bao gồm ít mã và ít phụ thuộc giữa các kiểu của bạn so với câu trả lời được chấp nhận.

Answer 4

Trong trường hợp của tôi, tôi thậm chí không cần chiều rộng, nó chỉ hoạt động thêm inline-block.