css text怎么显示光标位置

CSS的text属性有一个非常实用的功能，可以用来显示光标位置。 这个功能对于文本框、代码编辑器或任何需要获取用户输入的组件都非常有用。

textarea:focus{
    outline:none;
}
 
input[type=text]:focus{
    outline:none;
}

代码中的:focus伪类选择器可以让CSS在文本框聚焦时在光标位置添加一个指定的样式。 这个样式可以是不同颜色的边框，或者其他可视化效果，以便用户更清楚地看到他们正在编辑的内容。 上面的代码演示了一个适用于文本框以及单行输入框的样式规则。

接下来，我们将演示如何使用CSS text属性在内容中显示光标标记。 text属性的用法是将文本分为两部分-内容和光标。 其中，光标是一个垂直线条，指向文本内容中的当前位置。CSS提供了多种样式选项，包括修改光标的长度、颜色和位置。

 
 p{
     position:relative;
 }
 p::before {
     content:"|";
     position:absolute;
     left:-4px;
     color:red;
 }

使用::before伪元素，在段落文字的前面添加一个光标标记。该光标的位置为左侧，颜色为红色，并通过left属性定位在文本左侧边缘的稍微内部。 要在其它文本输入框中使用此设计器，请向父元素添加position:relative， 然后使用::before规则创建光标。