Thuộc tính text-emphasis-position trong CSS
Bùi Tấn Lực - 295
- 03/10/2025
Thuộc tính text-emphasis-position trong CSS dùng để đặt vị trí của các biểu tượng nằm ở trên, dưới, trái, phải văn bản trong phần tử HTML, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính text-emphasis-position trong CSS
Thuộc tính text-emphasis-position trong CSS dùng để đặt vị trí của các biểu tượng nằm ở trên, dưới, trái, phải văn bản trong phần tử HTML, biểu tượng do thuộc tính text-emphasis-style hoặc thuộc tính text-emphasis tạo ra.
Các vị trí của Thuộc tính text-emphasis-position trong CSS
over: Biểu tượng được đặt phía trên văn bản, text-emphasis-position: over;
under: Biểu tượng được đặt phía dưới văn bản, text-emphasis-position: under;
left: Biểu tượng được đặt bên trái văn bản, kết hợp với thuộc tính writing-mode: vertical-rl, text-emphasis-position: over right; writing-mode: vertical-rl;
right: Biểu tượng được đặt bên phải văn bản, kết hợp với thuộc tính writing-mode: vertical-rl, text-emphasis-position: under left; writing-mode: vertical-rl;
Code Thuộc tính text-emphasis-position trong CSS
text-emphasis-position: over; Biểu tượng được đặt phía trên văn bản.
text-emphasis-position: under; Biểu tượng được đặt phía dưới văn bản.
text-emphasis-position: over right; writing-mode: vertical-rl;
Biểu tượng được đặt bên phải văn bản.
text-emphasis-position: under left; writing-mode: vertical-rl;
Biểu tượng được đặt bên trái văn bản.
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-emphasis-position trong CSS</title>
<style>
p{margin-bottom:20px; text-emphasis-style: double-circle;}
</style>
</head>
<body>
<h1>Code Thuộc tính text-emphasis-position trong CSS</h1>
<span>Dùng để đặt vị trí của các biểu tượng nằm ở trên, dưới, trái, phải văn bản trong phần tử HTML, biểu tượng do thuộc tính text-emphasis-style hoặc thuộc tính text-emphasis tạo ra:</span>
<p style="text-emphasis-position: over;">text-emphasis-position: over; Biểu tượng được đặt phía trên văn bản.</p>
<p style="text-emphasis-position: under;">text-emphasis-position: under; Biểu tượng được đặt phía dưới văn bản.</p>
<p style="text-emphasis-position: over right; writing-mode: vertical-rl;">RIGHT</p>
<p style="text-emphasis-position: under left; writing-mode: vertical-rl;">LEFT</p>
</body>
</html>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-emphasis-position trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
