Question

让我们演示一个简单的HTML代码示例：

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
        AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
         AllowSorting="True" 
         onselectedindexchanged="GridView1_SelectedIndexChanged" 
         DataKeyNames="TempID">

        <Columns>
            <asp:BoundField DataField="ShopNumber" HeaderText="ShopNumber" SortExpression="ShopNumber" >
            <ItemStyle Width="150px"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="ShopName" HeaderText="ShopName" SortExpression="ShopName" >
            <ItemStyle Width="170px"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" >
            <ItemStyle Width="170px"></ItemStyle>
            </asp:BoundField>
            <asp:BoundField DataField="Website" HeaderText="Website" SortExpression="Website" >
            <ItemStyle Width="150px"></ItemStyle>
            </asp:BoundField>

            <asp:TemplateField HeaderText="Status" SortExpression="Status">
                <EditItemTemplate>
                    <asp:TextBox ID="textStatus" runat="server" Text='<%# Bind("Status") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Status") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle Width="150px" />
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Action" SortExpression="Action">
                <EditItemTemplate>
                    <asp:TextBox ID="textAction" runat="server" Text='<%# Bind("Action") %>'></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Action") %>'></asp:Label>
                </ItemTemplate>
                <ItemStyle Width="150px" />
            </asp:TemplateField>
            <asp:CommandField HeaderText="Settings" ShowEditButton="True" >
            <ItemStyle Width="150px"></ItemStyle>
            </asp:CommandField>

        </Columns>
    </asp:GridView>

我希望这个元素有一个由它设置的数据属性（data-icon）的前缀图标，所以我设置了这样的CSS文件：

<div data-icon="\25B6">Title</div>

我希望这个示例的输出如下所示：

div:before {
    content: attr(data-icon);
}

而不是所需的输出我可以得到的是：

▶Title

所以我的问题是：我做错了什么/我错过了什么？

JSFiddle示例：http://jsfiddle.net/Lqgr9zv6/

Answer 1

CSS转义序列仅适用于CSS字符串。当您从HTML属性（即CSS外部）获取CSS转义序列时，它将按字面读取，而不是解释为CSS字符串的一部分。

如果要在HTML属性中对字符进行编码，则需要将其编码为HTML实体。这将被CSS视为相应的Unicode字符。由于这是十六进制转义序列，因此您可以将其音译为like so：

<div data-icon="&#x25B6;">Title</div>

或者你可以use the Unicode character itself：

<div data-icon="▶">Title</div>

[次要补充]

如果属性的值必须在Vue或任何现在流行的JavaScript框架中被动，请使用Unicode表示法。

<div :data-icon="'\u25b6'">Title</div>

Answer 2

你可以用css三角形来表示箭头。 http://jsfiddle.net/Lqgr9zv6/3/

div{
position:relative;
text-indent:12px;
}


div:before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
margin:auto;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #000;
}

使用attr（data-icon）属性在元素之前显示unicode

2 个答案: