Vaadin 8.6.2中CSS实现标签右侧红色星号失败求助

你遇到的问题主要是因为直接给元素使用content属性是无效的——content只能通过伪元素（::after/::before）来生效，另外你的CSS选择器和定位方式也需要调整。下面是具体的解决方法：

步骤1：修正CSS代码 #

将你的CSS替换为以下内容，利用::after伪元素在文本右侧追加星号：

/* 针对添加了wrap样式的Label */
.v-label.wrap::after {
    content: " *"; /* 星号前加空格和文本保持间距 */
    color: red;
    margin-left: 2px; /* 可选：调整星号和文本的距离 */
}

为什么原来的CSS不生效？ #

• content属性仅对伪元素（::after/::before）有效，直接给.v-label-wrap设置content不会有任何效果；
• 你使用的position: absolute会让星号脱离正常文本流，容易导致位置错乱，改用默认的inline伪元素就能和文本自然对齐；
• Vaadin 8中，给Label添加wrap样式后，元素的类名是v-label wrap（而不是v-label-wrap），所以正确的选择器是.v-label.wrap。

步骤2：保持Java代码不变 #

你的Java代码不需要修改，依然可以使用：

Label lblAttr = new Label("Name");
lblAttr.addStyleName("wrap");

额外注意事项 #

• 确保你的自定义CSS文件是在Vaadin默认样式之后加载的，这样才能正确覆盖默认样式；
• 如果你的Label需要自动换行，Vaadin的wrap样式已经会处理文本换行，::after伪元素会固定在整个Label内容的最右侧，这符合必填项标记的常规预期。

内容的提问来源于stack exchange，提问作者Hari