2010-11-10 11 views
21

Bawiłem się z pseudo klasą :before w css, próbując wstawić znak specjalny, ale wynik nie jest tym, na co liczyłem.Wstaw znak specjalny używając: przed pseudo-klasą w css

Zastosowanie:

.read_more:before { 
    content: "»"; 
    margin-right: 6px; 
} 

mam charakter chcę, ale z  znak przed nim i za pomocą:

.read_more:before { 
    content: "»"; 
    margin-right: 6px; 
} 

uzyskać pełny » na stronie html.

Mogę wymyślić kilka sposobów rozwiązania mojego problemu, ale zastanawiałem się, jaka jest prawidłowa składnia, jeśli chcę użyć pseudo klasy :before.

Nawiasem mówiąc, moja doctype jest:

<!doctype html> 
<html lang="en"> 

Odpowiedz

13

Spróbuj określając <meta charset="utf-8">. Idealnie chcesz ustawić to na serwerze.

+0

HTML5 jest UTF-8 domyślnie. – Tae

+0

@Tae - http://static.medero.org/kak.html serwer dyktuje kodowanie, jeśli nie jest określone na samej stronie ... i ponieważ nie określił wyraźnie UTF-8, oczywiste jest, że musi . –

+0

Dzięki, to był naprawdę błąd w metatagu, został ustawiony na ISO coś ... – jeroen

2

Twoja przeglądarka nie używa prawidłowego kodowania tekstu - czyli nie używa tego samego kodowania tekstu co twój edytor. Jeśli otrzymujesz stronę z serwera WWW, najlepszym sposobem jest upewnienie się, że serwer wysyła odpowiedni nagłówek Content-Type. Jeśli nie masz kontroli nad nagłówkami serwera WWW lub jeśli będziesz przeprowadzać wiele testów przy użyciu lokalnych plików HTML, dodaj do swojego dokumentu appropriate tags dla kodowania i wersji HTML, której używasz. Polecam używanie UTF-8. Plik CSS (jeśli jest oddzielny od HTML) powinien używać tego samego kodowania.

35

spróbować

.read_more:before { 
    content: "\00BB"; 
    margin-right: 6px; 
} 

\ 00BB jest reprezentacja Unicode z tego znaku. Należy rozsądnie działa =)

1

Dodaj to na html, wewnątrz sekcji

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=UTF-8" /> 

<head> Ale jeśli strona html jest kodowana w PHP, wolałbym następujące:

<?php 
    header("Content-Encoding: utf-8"); 
    header("Content-type: text/html; charset=utf-8"); 
?> 

I nie zapomnij zapisać żadnego pliku (css, html, php) z kodowaniem UTF-8

+0

Dzięki, właśnie to zrobiłem, gdy zobaczyłem odpowiedź @ medera. – jeroen

0

Musisz mieć pewność, że wszystkie twoje pliki (CSS i HTML) mają to samo kodowanie.

16

Odpowiedź zostało już powiedziane, ale chcę się odnieść do:

uzyskać pełny &raquo; na stronie html.

Dzieje się tak, ponieważ właściwość CSS content nie jest traktowana jako HTML. Nie jest dołączany do DOM, dlatego też nie są analizowane żadne znaczniki specyficzne dla HTML. Możesz wstawić znak bezpośrednio: content: "Ԃ"; lub użyj notacji Unicode: content: "\0504";.

+0

Dzięki, to wyjaśnia, dlaczego nie widziałem tego w Firebug. – jeroen

+0

Dobre wyjaśnienie, to było rozwiązanie, którego potrzebowałem. Twoje zdrowie! –

5

Wiem, że minęło już trochę czasu, odkąd zadawano to pytanie, ale na wypadek, gdyby ktoś go potrzebował w dzisiejszych czasach, znalazłem na to rozwiązanie.

Here's wykres z dużą ilością glifów. Znajdź ten, który chcesz i skopiuj kod szesnastkowy do niego.

Następnie wklej to here do konwersji.

Dostaniesz wartość, która wygląda tak: \ 00E1 (CSS Value)

Wklej tę wartość na 'treści:' i być szczęśliwym :)

Powiązane problemy