css: sau khi ghi đè kiểu hiện có

Question

Tôi đang sử dụng ứng dụng asp.net mvc để hiển thị biểu tượng bắt buộc * và cũng là biểu tượng trợ giúp? là nhân vật. Nhưng ? đang ghi đè * và cuối cùng tôi chỉ có thể thấy một? ký hiệu. Làm thế nào tôi có thể hiển thị cả hai synmbols?

PS: Tôi đang cố gắng sử dụng 2 biểu tượng thay vì văn bản trong ngữ cảnh này. Tôi đang kiểm tra xem chúng tôi có tùy chọn để chứa các biểu tượng thay vì văn bản hay không.

Asp.Net MVC Mã để hiển thị một nhãn

@Html.LabelFor(model => model.myDetails, new { @class = "required labelHelp" }) 

Css Mã để hiển thị * và? sau nhãn

.required:after 
{ 
    content: "*"; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: "?"; 
    padding-left: 30px; 
    color: #f00; 
} 

Answer 1

Bạn có thể có một selector css mà kiểm tra nếu một yếu tố có cả lớp áp dụng content: "* ?"

.required:after 
{ 
    content: "*"; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: "?"; 
    padding-left: 30px; 
    color: #f00; 
} 

.required.labelHelp:after 
{ 
    content: "* ?"; 
    padding-left: 30px; 
    color: #f00; 
} 

Nếu bạn muốn một biểu tượng để hiển thị:

.required:after 
{ 
    content: ""; 
    background-image: url(/images/required.png); 
    width: 16px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:after 
{ 
    content: ""; 
    background-image: url(/images/labelHelp.png); 
    width: 16px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

.required.labelHelp:after 
{ 
    content: ""; 
    background-image: url(/images/required_labelHelp.png); 
    /* required_labelHelp.png should be an image that contains both required and labelHelp png*/ 
    width: 32px; 
    height: 16px; 
    padding-left: 3px; 
    color: #f00; 
} 

Answer 2

Nếu bạn chỉ có 2 biểu tượng có thể, đề xuất của tôi sẽ là sử dụng cả hai :before và :after. Vì các phần tử giả này chỉ có thể được sử dụng một lần cho mỗi phần tử (không ghi đè lẫn nhau), điều này cho bạn sự linh hoạt khi có 2 phần tử giả được áp dụng cùng một lúc, trong đó mỗi phần tử có thể có các kiểu độc lập riêng. Bạn có thể cần thêm một chút CSS bổ sung để định vị chính xác các biểu tượng, nhưng điều đó phải đơn giản. Lưu ý rằng điều này sẽ không hoạt động nếu bạn cần áp dụng 3 biểu tượng vì chỉ có 2 phần tử giả, :before & :after.

.required:after 
{ 
    content: "*"; 
    background-image: url(/images/required.png); 
    padding-left: 3px; 
    color: #f00; 
} 

.labelHelp:before 
{ 
    content: "?"; 
    background-image: url(/images/labelHelp.png); 
    padding-left: 30px; 
    color: #f00; 
} 

Answer 3

Dựa trên Mohamad câu trả lời, một cách để bao gồm các biểu tượng mà không cần phải tạo ra các hình ảnh tổng hợp

.required.labelHelp:after { 
 
    content: ""; 
 
    background-image: 
 
    url(http://placekitten.com/g/64/64), 
 
    url(http://placekitten.com/g/64/60); 
 
    background-position: 
 
    left top, 
 
    right top; 
 
    background-size: 
 
    60px 
 
    60px; 
 
    background-repeat: no-repeat; 
 
    width: 120px; 
 
    height: 60px; 
 
    position: absolute; 
 
}

<label class="required labelHelp">text</label>

Answer 4

gì về chiến lược trọng các :after? Bạn có thể làm điều này bằng cách thêm CSS này.

.required.labelHelp:after 
{ 
    content: "* ?"; 
    padding-left: 3px; 
    color: #f00; 
} 

DEMO