在CSS中，<hr>标签是用来分隔段落、文章或不同主题的常用元素。默认情况下，<hr>标签的宽度是100%，高度是1像素。然而，我们可以使用CSS来改变它的长度。

hr {width: 50%; /* 设置宽度为50% */height: 2px; /* 设置高度为2像素 */border: none; /* 去掉边框 */background-color: black; /* 修改颜色为黑色 */}

上面的CSS代码将<hr>元素的宽度设置为页面宽度的一半（50%），高度为2像素，并去掉了默认的边框。此外，还修改了颜色为黑色。

如果想让<hr>标签的长度适应不同的屏幕，可以使用CSS中的百分比单位。例如，下面的代码将把<hr>元素的长度设定为页面宽度的60%。

hr {width: 60%; /* 设置宽度为60% */height: 1px; /* 设置高度为1像素 */border: 0; /* 去掉边框 */background-color: #ccc; /* 修改颜色为灰色 */}

除了百分比单位，我们也可以使用固定单位（如像素）来改变<hr>标签的长度。例如，下面的代码将把<hr>元素的长度设定为30像素。

hr {width: 30px; /* 设置宽度为30像素 */height: 1px; /* 设置高度为1像素 */border: 0; /* 去掉边框 */background-color: black; /* 修改颜色为黑色 */}

总之，通过上述CSS代码，我们可以轻松修改<hr>标签的长度、宽度和颜色，从而使其更加符合设计需求。