верхний индекс первого элемента в фрагменте текста css - PullRequest
Новая
       9

верхний индекс первого элемента в фрагменте текста css

0 голосов
/ 27 апреля 2011

Я хочу верхний индекс первого символа этого текста с помощью css $ 50.00, чтобы $ был только половиной высоты остального текста.

Как я могу сделать это с помощью css?Есть ли способ выбрать первый символ в фрагменте текста и надписать его с помощью css?

1 Ответ

1 голос
/ 27 апреля 2011 
span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }

Это составит: 

<p>The current price is <span class="price">100.0</span></p>

В: 

The current price is $100.0

За исключением того, что $ будет верхним индексом.

Редактировать: Я протестировал его снова и могу подтвердить вышеуказанные работы. Однако все браузеры не поддерживают до и после в css.

В противном случае вы можете просто сделать это с помощью html следующим образом: 

<p>The current price is <sup class="price">$</sup>100.0</p>

Подтверждение разметки концепции для обоих решений: 

<!DOCTYPE html>
<html dir="ltr" lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <title>Price test</title> 
    <style>
        span.price:before{ content:'$'; font-size:xx-small; vertical-align:top; }
    </style>
</head> 
<body>
    <p>The price is <span class="price">100.0</span></p>
    <p>The price is <sup>$</sup>100.0</p>
</body></html>
...