如何将标题居中并在其后面添加颜色条？

<style>
    .center {
        text-align: center;
    }
</style>

<style>
    .color-bar {
        background-color: #ff0000; /* 设置颜色条的颜色 */
        height: 10px; /* 设置颜色条的高度 */
    }
</style>

<div class="center">
    <h1>标题</h1>
    <div class="color-bar"></div>
</div>