diff --git a/src/blocks/collections/class-collections-block.php b/src/blocks/collections/class-collections-block.php
index eba1d05e22..0dbf9a1d11 100644
--- a/src/blocks/collections/class-collections-block.php
+++ b/src/blocks/collections/class-collections-block.php
@@ -318,7 +318,7 @@ public static function render_collection_meta( $collection, $attributes ) {
 		if ( $attributes['showPeriod'] ) {
 			$period = Collection_Meta::get( $collection->ID, 'period' );
 			if ( $period ) {
-				$meta_parts[] = esc_html( $period );
+				$meta_parts[] = '<span class="wp-block-newspack-collections__period">' . esc_html( $period ) . '</span>';
 			}
 		}
 
@@ -328,27 +328,37 @@ public static function render_collection_meta( $collection, $attributes ) {
 		if ( $attributes['showVolume'] ) {
 			$volume = Collection_Meta::get( $collection->ID, 'volume' );
 			if ( $volume ) {
-				/* translators: %s is the volume number of a collection */
-				$vol_number[] = sprintf( _x( 'Vol. %s', 'collection volume number', 'newspack-plugin' ), esc_html( $volume ) );
+				$vol_number[] = '<span class="wp-block-newspack-collections__volume">' .
+					sprintf(
+						/* translators: %s is the volume number of a collection */
+						_x( 'Vol. %s', 'collection volume number', 'newspack-plugin' ),
+						esc_html( $volume )
+					) .
+					'</span>';
 			}
 		}
 
 		if ( $attributes['showNumber'] ) {
 			$number = Collection_Meta::get( $collection->ID, 'number' );
 			if ( $number ) {
-				/* translators: %s is the issue number of a collection */
-				$vol_number[] = sprintf( _x( 'No. %s', 'collection issue number', 'newspack-plugin' ), esc_html( $number ) );
+				$vol_number[] = '<span class="wp-block-newspack-collections__number">' .
+					sprintf(
+						/* translators: %s is the issue number of a collection */
+						_x( 'No. %s', 'collection issue number', 'newspack-plugin' ),
+						esc_html( $number )
+					) .
+					'</span>';
 			}
 		}
 
 		if ( $vol_number ) {
-			$meta_parts[] = implode( ' / ', $vol_number );
+			$meta_parts[] = implode( ' <span class="wp-block-newspack-collections__divider">/</span> ', $vol_number );
 		}
 
 		// Render meta text.
 		if ( ! empty( $meta_parts ) ) {
 			// Use different separator based on layout.
-			$separator = 'list' === $attributes['layout'] ? ' / ' : '<br>';
+			$separator = 'list' === $attributes['layout'] ? ' <span class="wp-block-newspack-collections__divider">/</span> ' : '<br>';
 			$meta_text = implode( $separator, $meta_parts );
 			?>
 			<div class="wp-block-newspack-collections__meta has-medium-gray-color has-text-color has-small-font-size">
diff --git a/src/blocks/collections/components/CollectionItem.jsx b/src/blocks/collections/components/CollectionItem.jsx
index c3faf5942d..c2c4b748d5 100644
--- a/src/blocks/collections/components/CollectionItem.jsx
+++ b/src/blocks/collections/components/CollectionItem.jsx
@@ -74,36 +74,60 @@ const CollectionItem = ( { collection, attributes } ) => {
 		return next.slice( 0, numberOfCTAs || 1 );
 	}, [ collection.ctas, showSubscriptionUrl, showOrderUrl, specificCTAs, numberOfCTAs ] );
 
-	// Build meta text, memoized.
-	const metaText = useMemo( () => {
-		const metaParts = [];
+	// Build meta elements, memoized.
+	const metaElements = useMemo( () => {
+		const elements = [];
 
 		// Add period first.
 		if ( showPeriod && period ) {
-			metaParts.push( period );
+			elements.push(
+				<span key="period" className="wp-block-newspack-collections__period">
+					{ period }
+				</span>
+			);
 		}
 
-		const volNumber = [];
-
-		if ( showVolume && volume ) {
-			volNumber.push( `Vol. ${ volume }` );
+		// Add separator if we have period and will have volume/number.
+		if ( showPeriod && period && ( ( showVolume && volume ) || ( showNumber && number ) ) ) {
+			const separator =
+				layout === 'list' ? (
+					<span key="period-sep" className="wp-block-newspack-collections__divider">
+						{ ' / ' }
+					</span>
+				) : (
+					<br key="period-sep" />
+				);
+			elements.push( separator );
 		}
 
-		if ( showNumber && number ) {
-			volNumber.push( `No. ${ number }` );
+		// Volume.
+		if ( showVolume && volume ) {
+			elements.push(
+				<span key="volume" className="wp-block-newspack-collections__volume">
+					{ `Vol. ${ volume }` }
+				</span>
+			);
 		}
 
-		if ( volNumber.length ) {
-			metaParts.push( volNumber.join( ' / ' ) );
+		// Separator between volume and number.
+		if ( showVolume && volume && showNumber && number ) {
+			elements.push(
+				<span key="vol-num-sep" className="wp-block-newspack-collections__divider">
+					{ ' / ' }
+				</span>
+			);
 		}
 
-		if ( metaParts.length ) {
-			// Use different separator based on layout.
-			const separator = layout === 'list' ? ' / ' : '<br>';
-			return metaParts.join( separator );
+		// Number.
+		if ( showNumber && number ) {
+			elements.push(
+				<span key="number" className="wp-block-newspack-collections__number">
+					{ `No. ${ number }` }
+				</span>
+			);
 		}
 
-		return '';
+		return elements;
 	}, [ showPeriod, period, showVolume, volume, showNumber, number, layout ] );
 
 	return (
@@ -143,9 +167,9 @@ const CollectionItem = ( { collection, attributes } ) => {
 					</h3>
 				) }
 
-				{ metaText && (
+				{ metaElements.length > 0 && (
 					<div className="wp-block-newspack-collections__meta has-medium-gray-color has-text-color has-small-font-size">
-						<RawHTML>{ metaText }</RawHTML>
+						{ metaElements }
 					</div>
 				) }
 
diff --git a/tests/unit-tests/collections/class-test-collections-block.php b/tests/unit-tests/collections/class-test-collections-block.php
index e5d97d859e..38580062be 100644
--- a/tests/unit-tests/collections/class-test-collections-block.php
+++ b/tests/unit-tests/collections/class-test-collections-block.php
@@ -327,7 +327,9 @@ public function test_render_collection_meta_list_layout() {
 		Collections_Block::render_collection_meta( $collection, $attributes );
 		$output = ob_get_clean();
 
-		$this->assertStringContainsString( $period . ' / Vol. ' . $volume, $output, 'Should use slash separator for list layout' );
+		$this->assertStringContainsString( $period, $output, 'Should contain period' );
+		$this->assertStringContainsString( 'Vol. ' . $volume, $output, 'Should contain volume' );
+		$this->assertStringContainsString( '>/</', $output, 'Should use slash separator for list layout' );
 	}
 
 	/**