Html 如何在CSS中获得内部文本的确切宽度？

嗨，我需要知道CSS中内部文本的确切宽度。正如您在图中所看到的，我希望这些菜单项分别具有适当的宽度，不包括填充或边距，以便我可以为它们提供类似“Posts”项的悬停效果。有没有什么方法可以用来获取内部文本的宽度

/*基本设置*/
@导入url（'https://fonts.googleapis.com/css?family=Roboto:100，400700&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
过渡：全部3秒；
颜色：#333；
}
a{
文字装饰：无；
颜色：继承；
}
李{
列表样式类型：无；
}
img{
边界：0；
}
html，正文{
身高：100%；
}
身体{
字体系列：“Roboto”，Helvetica，无衬线；
}
/*主要*/
身体{
背景色：白烟；
}
标题{
边框底部：1px实心#EEE；
高度：70像素；
溢出：隐藏；
背景色：白色；
}
标题>div{
垂直对齐：中间对齐；
}
标题>#徽标{
宽度：15%；
填充：20px；
右边框：1px实心#EEE；
文本对齐：右对齐；
显示：内联块；
}
标题>#徽标图像{
宽度：30px；
高度：自动；
}
标题>#搜索{
右边框：1px实心#EEE；
宽度：200px；
显示：内联块；
填充：20px；
}
标题>#搜索输入{
边界：0；
大纲：0；
显示：内联块；
宽度：80%；
垂直对齐：中间对齐；
左侧填充：10px；
}
标题>#搜索一个{
字号：1.2rem；
显示：内联块；
垂直对齐：中间对齐；
宽度：20%；
}
标题>#搜索>#搜索框{
边框：1px实心#CCC；
边界半径：100px；
溢出：隐藏；
}
标题>#gnb{
高度：70像素；
显示：内联块；
垂直对齐：中间对齐；
右边框：1px实心#EEE；
}
标题>#gnb ul{
利润率：0.30px；
线高：70px；
}
标题>#gnb li{
显示：内联块；
}
页眉>#gnb li:非（：最后一个子项）{
右边距：20px；
}
标题>#gnb a{
显示：内联块；
字体重量：较轻；
}
标题>#gnb a:悬停{
transform:translateY（-5px）；
}
.保险费{
颜色：橙色；
}
#社交媒体图标{
显示：内联块；
垂直对齐：中间对齐；
右边框：1px实心#EEE；
高度：70像素；
}
#社交媒体图标{
填充：0 20px；
线高：70px；
}
#社交媒体偶像李{
显示：内联块；
}
#社交媒体图标李：不是（：最后一个孩子）{
右边距：15px；
}
#社交媒体偶像李娜{
字号：2rem；
显示：内联块；
}
#社交媒体图标李娜：悬停{
transform:translateY（-5px）；
}
#侧面图{
显示：内联块；
垂直对齐：中间对齐；
}
#剖面图a{
左边距：20px；
}
#纵断面图{
宽度：50px；
高度：50px；
边界半径：50%；
}
#副标题{
边框底部：1px实心#EEE；
高度：50px；
背景色：白色；
}
#副标题ul{
宽度：800px；
保证金：0自动；
}
#副标题li{
线高：47px；
显示：内联块；
边框底部：3倍纯色透明；
填充：0 20px；
}
#子标题li：悬停{
边框底部：3件纯色矢车菊蓝！重要；
}
#副标题a{
文本对齐：居中；
显示：内联块；
宽度：100%；
}
.选定{
边框底部：3件纯色矢车菊蓝！重要；
}
主要{
宽度：1000px；
保证金：30像素自动；
}
旁白{
宽度：200px；
背景色：白色；
}
#比尔盖茨{
填充：20px；
边框底部：1px实心#EEE；
}
#比尔盖茨形象{
边缘底部：20px；
}
#比尔·盖茨图片>img{
保证金：0自动；
显示：块；
宽度：100px；
高度：100px；
边界半径：50%；
}
#比尔盖茨生物{
文本对齐：居中；
边缘底部：30px；
}
#比尔·盖茨>h2{
边缘底部：5px；
}
#比尔·盖茨{
字体重量：较轻；
利润底部：3倍；
}
#比尔·盖茨：最后一个孩子{
颜色：#CCC；
}
#比尔·盖茨跟随按钮{
文本对齐：居中；
边缘底部：10px；
}
#比尔·盖茨遵循按钮>a{
显示：内联块；
线高：20px；
填充：10px 50px；
背景颜色：矢车菊蓝；
颜色：白色；
边界半径：30px；
边框：1px实心透明；
}
#比尔·盖茨跟随按钮>a:悬停{
背景色：rgb（70134253）；
}
#比尔盖茨连接按钮{
文本对齐：居中；
}
#比尔·盖茨连接按钮>a{
线高：20px；
显示：内联块；
填充：10px 40px；
背景色：白色；
颜色：矢车菊蓝；
边框：1件纯色矢车菊蓝；
边界半径：30px；
}
#比尔·盖茨连接按钮>a：悬停{
背景色：#EEE；
}
#偏中{
溢出：隐藏；
边框底部：1px实心#EEE；
高度：80px；
}
#联系{
文本对齐：居中；
浮动：左；
宽度：50%；
身高：100%；
右边框：1px实心#EEE；
}
#追随者{
文本对齐：居中；
浮动：对；
宽度：50%；
身高：100%；
}

比尔盖茨
使用元素的
width
属性，该属性获取内容区域的宽度，不包括任何填充、边框或边距


.bg标记{
字体系列：Arial，无衬线；
字体大小：14px；
文字装饰：无；
}
.bg标签：焦点{
垫底：2件；
边框底部：2件纯色#000；#随心所欲变色
宽度：100%；
}
也许这会回答您的问题：谢谢。但是，我不想得到内部文本本身的确切宽度，而是想给它两边额外增加10px的宽度。可以用span标记来包装文本吗？在你目前的结构中？是的。有什么好的使用span标记的方法吗？你能在代码段中分享你的代码吗？