Pseudo lớp :: trước - tạo css vòng tròn

Question

Tôi đang cố gắng để tạo ra các vòng tròn với css, nhưng wan't để sử dụng lớp giả :: trước

này cần được như thế (đối với danh sách các trạm tàu ​​điện ngầm) :

.subway-item{ 
// css for text item going after circle 
} 
.subway-item::before{ 
    width:15px; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    background-color:#69b6d5; 
} 

Tôi biết rằng nó có thể được thực hiện với phần tử bổ sung trước văn bản hoặc hình ảnh. Nhưng muốn biết là có thể sử dụng các thuộc tính như vậy trong :: trước

Answer 1

Bạn cũng cần đặt content, height và display để làm cho nó thực sự hiển thị phần tử giả.

Ví dụ:

.subway-item::before{ 
    content: ''; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    -moz-border-radius: 7.5px; 
    -webkit-border-radius: 7.5px; 
    border-radius: 7.5px; 
    background-color: #69b6d5; 
} 

Lưu ý: Nó tốt hơn để viết các thuộc nhà cung cấp cụ trước thuộc tính tiêu chuẩn (border-radius trong trường hợp của bạn).