Html 如何使一半的文本在div内部，另一半在CSS外部？_Html_Css

Html 如何使一半的文本在div内部，另一半在CSS外部？

html css

Html 如何使一半的文本在div内部，另一半在CSS外部？,html,css,Html,Css,正如你在图片上看到的，我希望“h”在蓝色的div上，而“ello”在图片的白色部分。我尝试将“h”浮动到右侧，然后添加一个：：after，内容为“ello”，但没有成功。我该怎么做呢 .home-text-h1{ 位置：相对位置；最高：30%；浮动：对；字体大小：40px； } .home-text-h1:：之后{ 内容：“ello”；背景色：红色； } H 将代码替换为以下内容。您可以在HTML中添加另一个单独的div。这里有一个例子 <!DOCTYPE html>

正如你在图片上看到的，我希望“h”在蓝色的div上，而“ello”在图片的白色部分。我尝试将“h”浮动到右侧，然后添加一个：：after，内容为“ello”，但没有成功。我该怎么做呢

.home-text-h1{
位置：相对位置；
最高：30%；
浮动：对；
字体大小：40px；
}
.home-text-h1:：之后{
内容：“ello”；
背景色：红色；
}

将代码替换为以下内容。您可以在HTML中添加另一个单独的div。这里有一个例子

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.home-text-h1 {
    position: relative;
    top: 30%;
    float: right;
    font-size: 40px;
}
h1{
    display:inline;
    float: left;
}
.home-text-h1::after {
    content: "ello";
    background-color: red;
}
</style>
</head>
<body>

<div>
  <div className="left-margin">
    <h1 className="home-text-h1">h</h1>
  </div>
  <div className="left-margin">
    <h1 className="home-text-h1">ello</h1>
  </div>
  </div>

</body>
</html>


页面标题
.home-text-h1{
位置：相对位置；
最高：30%；
浮动：对；
字体大小：40px；
}
h1{
显示：内联；
浮动：左；
}
.home-text-h1:：之后{
内容：“ello”；
背景色：红色；
}
H
埃洛

您可以为home-text-h1分配否定边距


你好

您可以使用

：第一个字母

div{
背景：红色；
}
分区集装箱{
填充：20px 0 20px 20px；
背景：#C3C3；
宽度：200px；
}
h1{
位置：相对位置；
字体大小：40px；
填充：0；
保证金：0；
颜色：#000；
线高：1.1；
}
h1：：第一个字母{
背景：#fff；
身高：100%；
}

你好

.whiteDiv{
背景色：白色；
浮动：左；
}
布鲁迪夫人{
背景颜色：蓝色；
浮动：左；
}

H
埃洛
这是使用标记标记的典型html5解决方案，但是任何内联显示都可以，您也可以使用span标记。
Hello
您犯的第一个错误是使用了错误的属性。它应该是class
，而不是className
。第二个是假设：：after不是“parent”元素的一部分，但是如果您浮动某个元素，那么：：after将作为浮动元素的一部分。所以你原来的想法不起作用。我将：：放在实际容器div之后，并将其转换为容器外部。请参阅下面的代码：

。左边距{
位置：相对位置；
宽度：120px；
高度：140像素；
背景色：#272343；
}
.左边距：：之后{
内容：“ello”；
背景色：红色；
变换：translateX（100%）；/*将元素自身大小向右移动*/
}
.left margin:：after，/*将after元素的样式设置为与h1相同的样式*/
.home-text-h1{
位置：绝对位置；
最高：30%；
右侧：0px；/*放置在右侧*/
边际：0px；
字体大小：40px；
字体大小：粗体；
}

H
尝试使用：：first letter为什么不在标记中写hello，并在需要不同颜色的位周围加上一个跨距？这会更容易理解，尤其是如果它是H1，那么在发布的代码中任何地方都没有蓝色背景色。在单词的一部分使用标记标记是语义正确的吗？只是出于好奇，我认为这是一个解决方案，但我有一个疑问。@Sfili_81 marked用于标记，突出显示文本，所以这是正确的用法，因为你基本上是“突出显示”该单词的一部分。但是从（我更喜欢文档）：不要用于语法突出显示的目的；相反，使用应用了适当CSS的元素。这就是我怀疑的原因。：）@Sfili_81正如我提到的，您也可以使用span标记，更新了示例以包含span标记这是唯一有效的方法，谢谢。