Aslında bu soruyu bir sonraki soruda (bkz: HTML5'te Alıntı (Quotes) Tasarımı ve CSS Örnekleri) alıntı yapmak için hazırlıyorum, çünkü sık sık lazım oluyor ve teker teker css ile before ve after kodları yazmakla uğraşmak yerine bir yerlerden hazır olarak alıp kullanmak istiyor insan.
Uygulamalı bir örnek üzerinden bu soruyu yanıtlayacağım. Örneğin bir alıntı yapıyor olalım ve yazının (span olsun) başına ve sonuna tırnak işareti (karakter) eklemek isteyelim.
Soldaki karakter before; sağdaki de after olacak şekilde ilgili css kodları:
<style>
blockquote:before {
display: block;
font-size: 700%;
content: "\201C";
height: 1px;
margin-left: 0.55em;
position: relative;
top: 17px;
color: #c36d7a;
}
blockquote:after {
display: block;
font-size: 700%;
content: "\201D";
height: 1px;
margin-left: 10.85em;
position: relative;
top: 10px;
color: #c36d7a;
}
</style>
Elbette bu örnekte vermiş olduğum karakter örneğini değiştirerek istediğiniz karakterlerin istediğiniz konumda before ya da after olarak görünmesini sağlayabilirsiniz.
Not: Alıntının içine stil yazmak için kullanacabileceğimiz hazır css kodlarını bir sonraki sorudan inceleyebilirsiniz.