html label:after content 需要在文本中有不同的颜色 [英] html label:after content needs to have different colors in the text

问题描述

我设置了我的模型属性的显示名称，但如果不需要它们，我需要它们用冒号显示，如果需要则用冒号和红色星号显示.

我不想在显示名称中添加冒号，因为我不希望冒号出现在错误消息中，而且我可能希望在没有它的情况下将它们显示在某个地方.

我在 HTML 文件中使用了以下样式来添加冒号:

.my-label >标签:{内容: ": ";}

但是，如果需要该字段，我无法弄清楚如何在此之后显示红色星号.

我可以创建另一个样式类来包含星号，但是如果我更改颜色，它要么全红要么全黑.我不确定我是否想将实际的模型属性设置为必需的，因为我不确定我是否想要一个通用规则来说明它是必需的.

欢迎提出更好的处理方法的建议.

解决方案

问题

不可能在单个伪元素中使用不同的颜色.在这种情况下，您可以使用 :after 伪元素输出 :* 但不能使字符具有不同的颜色.

解决方案 1

实现目标的一种可能方法是使用 :before 伪元素.当然，最重要的问题是这会将星号放在 label 的开头.您可以通过使 label 使用 flexbox 模型来解决此问题.这将允许更改伪元素的顺序，允许您将 :before 元素放在 label:

的末尾

.my-label >标签 {显示:inline-flex；}.my-label.required >标签:之前{红色;内容: "*";订单:1；}.my-label >标签:{内容: ":";}

<label>不需要</label><input type="text"/>
<div class="需要我的标签"><label>必需</label><input type="text"/>

缺点

此解决方案的缺点是，如果用户使用的浏览器不支持 flexbox 或 IE (其中一个错误会阻止 flexbox 规则应用于伪元素)星号将显示在标签之前.

解决方案 2

实现此目的的第二种方法是使用绝对定位.通过将 label 设置为 position: relative;，您可以将 :before 元素置于其末尾，使其成为 position: absolute; 和 right: 0;.通过添加一些正确的 padding，您可以为元素保留"空间，这样文本就不会重叠.

.my-label >标签 {/*10px 适用于不支持 ch 单位的旧浏览器*/padding-right: 10px;填充右:1ch；位置:相对；}.my-label.required >标签:之前{红色;内容: "*";位置:绝对；右:0；}.my-label >标签:{内容: ":";}

<label>不需要</label><input type="text"/>
<div class="需要我的标签"><label>必需</label><input type="text"/>

缺点

这种方法没有太多缺点，因为它应该适用于大多数浏览器(甚至是较旧的浏览器).

I have the display name of my model properties set, but I need them to display with a colon if they're not required and a colon and a red asterisk if they are.

I didn't want to add the colon to the display name since I don't want the colon to appear in error messages and I may want to display them somewhere without it.

I used the following style in my HTML file for adding the colon:

.my-label > label:after {
        content: ": ";
}

However I can't figure out how to get a red asterisk to display after that if the field is required.

I could create another style class to include the asterisk, however if I change the color it's either all red or all black. I'm not sure I want to set the actual model property to be required because I'm not sure I want a universal rule stating that it is required.

Any suggestions of a better way to handle this would be welcome.

解决方案

The problem

It is not possible to use different colours in a single pseudo element. In this case you are able to output :* using the :after pseudo element but are not able to make the characters different colours.

Solution 1

One possible way to achieve what you are after is to use the :before pseudo element. The overriding issue, of course is that this will put the asterisk at the beginning of the label. You can fix this by making the label use the flexbox model. This will allow the order of the pseudo elements to be changed allowing you to place the :before element at the end of the label:

.my-label > label {
  display: inline-flex;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  order: 1;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

The drawbacks

The drawbacks to this solution is that if the user is using a browser that does not support flexbox or IE (where a bug stops the flexbox rules being applied to pseudo elements) the asterisk will be displayed before the label.

Solution 2

A second way to achieve this would be to use absolute positioning. By setting label to position: relative; you can position the :before element at its end by making it position: absolute; and right: 0;. By adding some right padding you can "reserve" space for the element so the text doesn't overlap.

.my-label > label {
  /*10px is for old browsers which don't support the ch unit*/
  padding-right: 10px;
  padding-right: 1ch;
  position: relative;
}
.my-label.required > label:before {
  color: red;
  content: "*";
  position: absolute;
  right: 0;
}
.my-label > label:after {
  content: ":";
}

<div class="my-label">
  <label>Not required</label>
  <input type="text" />
</div>
<div class="my-label required">
  <label>Required</label>
  <input type="text" />
</div>

The drawbacks

Not many drawbacks to this method as it should work in the majority of browsers (even older ones).

这篇关于html label:after content 需要在文本中有不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！