CSS圖形向右展開可以通過CSS的一些屬性來實現，其中包括：

display: inline-block; /* 將元素設為行內塊 */
width: 0; /* 初始化寬度為0 */
height: 100%; /* 高度100% */
background-color: #f00; /* 設置背景顏色 */
transition: width 0.3s; /* 添加寬度變化的過渡效果 */

通過以上屬性，我們可以創建一個向右展開的橫條。但這并不是最終的效果。接下來，我們還需要添加一些偽元素的CSS樣式，使其看起來更像一個向右展開的圖形：

&::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-left: -1.5em;
border-top: 0.2em solid #f00;
border-bottom: 0.2em solid #f00;
transition: width 0.3s;
}
&::after {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
margin-right: -1.5em;
border-top: 0.2em solid #f00;
border-bottom: 0.2em solid #f00;
transition: width 0.3s;
}

通過添加偽元素before和after，我們可以創造出一個向右展開的圖形。其中before偽元素是從左側開始展開，after偽元素是從右側開始展開，二者的交匯處形成了一個完整的向右展開的圖形。

當然，具體展示效果還需要根據實際情況進行相關的調整和優化，但核心思路就是以上所述。