css - 带有CSS的一段文本中的上标第一项

标签 css superscript

我想用 css $50.00 为这个文本的第一个字符加上上标,这样 $ 就只有文本其余部分高度的一半。

我如何用 css 做到这一点?有什么方法可以选择一段文本中的第一个符号并用 css 上标吗?

最佳答案

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 中的 before 和 after。

否则你可以像这样用 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>

关于css - 带有CSS的一段文本中的上标第一项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5803722/

相关文章:

android - 盒子阴影在 Android 中不起作用

html - 当文本填充文本区域的宽度和高度时如何禁止输入?

ipad - iPad 上的主要内容 block 位置搞砸了

javascript - <sup> 标签在 WordPress 中不起作用

regex - 用纯数字替换 Unicode 数字下标或上标

html - Div 部分居中但无法动态居中

html - CSS 防止链接像链接一样工作

flutter - flutter 中的 SuperScript 和 SubScript

ssrs-2008 - 在 SSRS 报告中显示上标

javascript - 在所有商标和注册商标符号周围添加上标 <sup> 标签